/* Alphabet Brand Tokens
-----------------------------------------------------------------
   Source: Brandbook Alphabet (2026)
   Core palette : #6f5da7  #01033e  #d4d6e2  #95bbea
   Logo ink     : #1a122c
   Loaded before style.css so every stylesheet and inline block
   resolves against a single source of truth.
-----------------------------------------------------------------*/

:root {
	/* --- Brand core (exact brandbook values) --- */
	--brand: #6f5da7;
	--brand-navy: #01033e;
	--brand-mist: #d4d6e2;
	--brand-sky: #95bbea;
	--brand-ink: #1a122c;

	/* --- Derived accents ---
	   The site runs on a dark canvas, where #6f5da7 sits at ~3.5:1.
	   `soft` carries small accent text (6.3:1), `strong` carries
	   pressed / hover states, `deep` carries tinted surfaces. */
	--brand-soft: #9b8ad0;
	--brand-strong: #574789;
	--brand-deep: #2a2148;

	/* --- rgb channels for rgba() composition --- */
	--brand-rgb: 111, 93, 167;
	--brand-soft-rgb: 155, 138, 208;
	--brand-sky-rgb: 149, 187, 234;
	--brand-navy-rgb: 1, 3, 62;
	--brand-mist-rgb: 212, 214, 226;

	/* --- Surfaces (brand-tinted neutrals, tuned to the previous
	       luminance ramp so contrast and depth are preserved) --- */
	--bg-1: #0f0b1e; /* page canvas          (was #0f0f0f) */
	--bg-2: #141026; /* raised section       (was #121212) */
	--bg-3: #08050f; /* deepest well         (was #000000) */
	--bg-4: #1c1638; /* hover / active fill              */

	/* --- Lines & separators --- */
	--line-1: #241d3a;
	--line-2: #2f2745;
	--line-3: #38304f;

	/* --- Text --- */
	--text-1: #ffffff;
	--text-2: #d4d6e2;
	--text-3: #a7a3bd;
	--text-4: #7e7996;

	/* --- Typography --- */
	--font-sans: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Arabic keeps its own face; the brand's Aktiv Grotesk has no web
   licence here, so the established Thmanyah stack stays in place. */
html[lang="ar"] {
	--font-sans: "Thmanyah Sans", "Inter", sans-serif;
}

/* --- Brand utility classes ------------------------------------ */
.brand-color { color: var(--brand-soft) !important; }
.brand-bg { background-color: var(--brand) !important; }
.brand-navy-bg { background-color: var(--brand-navy) !important; }

/* Brand logo lockups.
   The new lockup is far less wide than the old one (3.9:1 against
   6.1:1), so it is sized by HEIGHT. Constraining by width would blow
   the logo up by ~55% and shove the navbar out of balance. */
.brand-lockup {
	max-width: none !important;
}

.brand-lockup img {
	display: block;
	width: auto !important;
	height: 30px;
}

.brand-lockup--footer img { height: 40px; }

@media screen and (max-width: 991px) {
	.navbar .logo.brand-lockup {
		max-width: none !important;
	}

	.brand-lockup img { height: 26px; }
	.brand-lockup--footer img { height: 34px; }
}

.brand-mark {
	display: block;
	width: auto;
	height: 32px;
}

/* --- Editorial imagery ----------------------------------------
   The theme's stock collages ship in a hot orange/teal palette that
   fought the old brand less than it fights this one. Pulling most of
   the chroma out and re-tinting toward the brand keeps their depth
   and playfulness while letting them sit inside the purple system. */
[data-background^="/assets/imgs/serv-img/"] {
	filter: grayscale(0.75) contrast(1.05) brightness(0.95) sepia(0.25)
		hue-rotate(200deg) saturate(1.4);
}

/* --- Paginator -------------------------------------------------
   Shared by every list that renders vendor/pagination/projects:
   the work listing, the investment portfolio and the blog. It used
   to be pasted inline into each page, so a new page picked up the
   markup and silently lost the styling. The two live here together
   now. Arrow direction is handled in the markup, not by mirroring
   this, so RTL needs nothing extra. */
.proj-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 50px;
}

.proj-pag-nav {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	text-decoration: none;
	transition: color 0.3s ease;
}

.proj-pag-nav:hover:not(.disabled) {
	color: var(--brand-soft);
}

.proj-pag-nav.disabled {
	opacity: 0.2;
	cursor: default;
}

.proj-pag-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.proj-pag-dot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.proj-pag-dot.active {
	width: 24px;
	border-radius: 3px;
	background: var(--brand);
	cursor: default;
}

.proj-pag-dot:hover:not(.active) {
	background: rgba(255, 255, 255, 0.5);
}

/* The dot is a 6px target; give it a real tap area without moving it. */
.proj-pag-dot::after {
	content: "";
	position: absolute;
	inset: -14px;
}

.proj-pag-dots a.proj-pag-dot {
	position: relative;
}