/* ==========================================================================
   Alqima Urban — Design tokens
   Single source of truth for colour, type, space, motion, glass and layout.
   ========================================================================== */

:root {
	/* ============================================================ Colour
	   Official Alqima Urban palette (Stage 05) — the ONLY place brand colour
	   values are written. Everything else uses the tokens below.
	   ================================================================== */
	--color-navy: #182943;        /* primary — deep navy */
	--color-burgundy: #68252c;    /* secondary — controlled accent */
	--color-beige: #e1cbb3;       /* accent / warm neutral */
	--color-off-white: #faf9f6;   /* primary light background */
	--color-white: #ffffff;

	/* Channels of the same colours, for translucency: rgb(var(--rgb-navy) / .5) */
	--rgb-navy: 24 41 67;
	--rgb-burgundy: 104 37 44;
	--rgb-beige: 225 203 179;
	--rgb-off-white: 250 249 246;
	--rgb-ink: 14 25 42;          /* navy darkened ~40% — image scrims only */
	--rgb-white: 255 255 255;

	/* Tonal steps derived from the palette (mixes — no new hues) */
	--color-navy-raised: color-mix(in srgb, var(--color-navy) 90%, var(--color-white));
	--color-navy-high: color-mix(in srgb, var(--color-navy) 80%, var(--color-white));
	--color-beige-soft: color-mix(in srgb, var(--color-beige) 40%, var(--color-off-white));
	--color-beige-deep: color-mix(in srgb, var(--color-beige) 82%, var(--color-navy));

	/* ------------------------------------------------------------------ Type */
	--f-latin: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--f-arabic: "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;
	--f-body: var(--f-latin);

	/* Fluid scale (min @320px → max @1920px) */
	--fs-display: clamp(4rem, 2.2rem + 11.2vw, 13.75rem);  /* hero lockup: 64px → 220px */
	--fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 6rem);
	--fs-h2: clamp(2rem, 1.4rem + 3vw, 4.5rem);
	--fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	--fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.375rem);
	--fs-body: clamp(0.9375rem, 0.91rem + 0.12vw, 1.0625rem);
	--fs-small: 0.8125rem;   /* 13px */
	--fs-label: 0.6875rem;   /* 11px — uppercase labels */
	--fs-micro: 0.6875rem;   /* 11px — metadata (Stage 08: 10px was below the legibility floor on phones) */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-display: 0.84;
	--lh-tight: 1.04;
	--lh-snug: 1.25;
	--lh-body: 1.6;

	--tr-display: -0.055em;   /* Latin display only */
	--tr-heading: -0.03em;
	--tr-body: -0.005em;
	--tr-label: 0.18em;
	--tr-nav: 0.14em;

	/* ----------------------------------------------------------------- Space */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--s-10: 8rem;
	--s-section: clamp(6rem, 4rem + 10vw, 14rem);

	/* ---------------------------------------------------------------- Layout */
	--grid-cols: 4;
	--gutter: 1rem;
	--margin: 1.25rem;
	--max-w: 120rem;              /* 1920px */
	--header-h: 4.5rem;
	--safe-t: env(safe-area-inset-top, 0px);    /* v1.3: notch / Dynamic Island */
	--safe-b: env(safe-area-inset-bottom, 0px); /* v1.3: home indicator */

	/* ---------------------------------------------------------------- Shape */
	--r-xs: 2px;
	--r-sm: 6px;
	--r-md: 12px;
	--r-pill: 999px;

	/* ---------------------------------------------------------------- Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* expo-out: cinematic settle */
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
	--dur-1: 180ms;
	--dur-2: 320ms;
	--dur-3: 600ms;
	--dur-4: 900ms;

	/* Reveal language (Stage 08) — one set of values for every section:
	   text/copy rise a short distance and fade; stagger is uniform. */
	--reveal-y: 18px;
	--reveal-fade: 0.9s;
	--reveal-move: 1.1s;
	--reveal-stagger: 70ms;

	/* ------------------------------------------------------- Glass UI system
	   Stage 08 — two materials, two blur levels, one hairline, one inner
	   highlight. Glass is a supporting layer: header bar, language panel,
	   featured-project metadata, the small play disc and dialog close. Never
	   for content blocks, never with a drop shadow, never glowing. */
	--glass-navy: rgb(var(--rgb-navy) / 0.72);          /* floating navy glass (spec .55–.75) */
	--glass-navy-quiet: rgb(var(--rgb-navy) / 0.56);    /* over photography (already dark) */
	--glass-line: rgb(var(--rgb-white) / 0.14);         /* hairline on navy glass (spec .12–.20) */
	--glass-inner: inset 0 1px 0 rgb(var(--rgb-white) / 0.07);
	--glass-header: rgb(var(--rgb-navy) / 0.34);        /* Final: floating header over dark (brief .25–.40) */
	--glass-header-light: rgb(var(--rgb-off-white) / 0.62); /* Final: header over Off White / Beige (navy text) */
	--glass-header-line-light: rgb(var(--rgb-navy) / 0.1);
	--glass-blur-lg: 22px;                              /* header: stronger blur keeps the lighter glass legible */
	--glass-blur-sm: 10px;                              /* small controls */
	--glass-blur-md: 16px;                              /* bars and panels */

	/* ---------------------------------------------------------------- Layers */
	--z-media: 0;
	--z-content: 10;
	--z-menu: 95;      /* fullscreen menu sits under the header controls */
	--z-header: 100;
	--z-overlay: 200;
	--z-grain: 300;
	--z-skip: 400;
}

/* ==========================================================================
   Semantic colour tokens — Deep Navy surface (default).
   Re-declared on .surface--navy / .on-navy so navy UI (header, fullscreen
   menu, footer, dark sections) stays navy inside light pages.
   .surface--light / .surface--beige (below) redefine the same names, so
   every component adapts to the surface it sits on.
   ========================================================================== */
:root,
.surface--navy,
.on-navy {
	--c-canvas: var(--color-navy);
	--c-surface-1: var(--color-navy-raised);          /* media placeholders */
	--c-surface-2: var(--color-navy-high);
	--c-text: var(--color-off-white);
	--c-text-2: rgb(var(--rgb-off-white) / 0.76);       /* 8.6:1 on navy */
	--c-text-3: rgb(var(--rgb-beige) / 0.74);           /* metadata 5.8:1 */
	--c-hairline: rgb(var(--rgb-off-white) / 0.14);
	--c-hairline-strong: rgb(var(--rgb-off-white) / 0.28);
	--c-accent: var(--color-beige);                     /* small marks on navy */
	--c-accent-fill: var(--color-burgundy);             /* selected states, fills */
	--c-on-accent: var(--color-off-white);
	--c-focus-halo: rgb(var(--rgb-ink) / 0.7);
	--c-scheme: dark;

	/* Glass — navy-based translucent surfaces, hairline borders */
	--glass-bg: rgb(var(--rgb-off-white) / 0.06);
	--glass-bg-strong: rgb(var(--rgb-off-white) / 0.1);
	--glass-tint: rgb(var(--rgb-navy) / 0.9);           /* header / panels — reads navy over light sections */
	--glass-tint-solid: rgb(var(--rgb-navy) / 0.94);    /* no backdrop-filter */
	--glass-border: rgb(var(--rgb-off-white) / 0.16);
	--glass-border-strong: rgb(var(--rgb-off-white) / 0.24);
	--glass-blur: 18px;
	--glass-saturate: 130%;
}

/* Tablet 768–1439 */
@media (min-width: 48em) {
	:root {
		--grid-cols: 8;
		--gutter: 1.25rem;
		--margin: 2rem;
		--header-h: 5rem;
	}
}

/* Desktop 1440+ (12 cols already from 1200 for small laptops) */
@media (min-width: 75em) {
	:root {
		--grid-cols: 12;
		--gutter: 1.5rem;
		--margin: clamp(2.5rem, 3.4vw, 4.5rem);
		--header-h: 5.5rem;
	}
}

/* Arabic: same system, tuned type. No aggressive negative tracking. */
:root[dir="rtl"] {
	--f-body: var(--f-arabic);
	--tr-heading: 0;
	--tr-body: 0;
	--tr-label: 0;
	--tr-nav: 0;
	--lh-body: 1.85;
	--lh-snug: 1.5;
	--lh-tight: 1.3;
}

/* ==========================================================================
   Surfaces — the brand rhythm: Deep Navy · Off White · Warm Beige
   (burgundy stays an accent). Apply to a section: class="… surface--light".
   Inner pages: <body class="is-light-page"> (off-white reading surface);
   the header, menu and footer carry .on-navy / .surface--navy.
   ========================================================================== */
.surface--navy,
.surface--light,
.surface--beige,
.surface--burgundy {
	background-color: var(--c-canvas);
	color: var(--c-text);
	color-scheme: var(--c-scheme);
}

/* Navy UI inside a light page (header, case-study cover): tokens + the
   inherited text colour, no background of its own. */
.on-navy {
	color: var(--c-text);
	color-scheme: dark;
}

.surface--light,
.is-light-page {
	--c-canvas: var(--color-off-white);
	--c-surface-1: var(--color-beige-soft);
	--c-surface-2: var(--color-beige);
	--c-text: var(--color-navy);
	--c-text-2: rgb(var(--rgb-navy) / 0.8);            /* 7.4:1 */
	--c-text-3: rgb(var(--rgb-navy) / 0.68);           /* 5.1:1 */
	--c-hairline: rgb(var(--rgb-navy) / 0.13);
	--c-hairline-strong: rgb(var(--rgb-navy) / 0.26);
	--c-accent: var(--color-burgundy);
	--c-focus-halo: rgb(var(--rgb-off-white) / 0.9);
	--c-scheme: light;
	--glass-bg: rgb(var(--rgb-off-white) / 0.6);
	--glass-bg-strong: rgb(var(--rgb-off-white) / 0.8);
	--glass-border: rgb(var(--rgb-navy) / 0.12);
	--glass-border-strong: rgb(var(--rgb-navy) / 0.2);
}

.surface--beige {
	--c-canvas: var(--color-beige);
	--c-surface-1: var(--color-beige-deep);
	--c-surface-2: var(--color-beige-deep);
	--c-text: var(--color-navy);
	--c-text-2: rgb(var(--rgb-navy) / 0.84);           /* 6.4:1 */
	--c-text-3: rgb(var(--rgb-navy) / 0.74);           /* 4.9:1 */
	--c-hairline: rgb(var(--rgb-navy) / 0.16);
	--c-hairline-strong: rgb(var(--rgb-navy) / 0.3);
	--c-accent: var(--color-burgundy);
	--c-focus-halo: rgb(var(--rgb-beige) / 0.9);
	--c-scheme: light;
	--glass-bg: rgb(var(--rgb-off-white) / 0.4);
	--glass-bg-strong: rgb(var(--rgb-off-white) / 0.6);
	--glass-border: rgb(var(--rgb-navy) / 0.14);
	--glass-border-strong: rgb(var(--rgb-navy) / 0.24);
}

/* Burgundy — used once, for the Final CTA (the closing brand statement). */
.surface--burgundy {
	--c-canvas: var(--color-burgundy);
	--c-surface-1: color-mix(in srgb, var(--color-burgundy) 88%, var(--color-white));
	--c-text: var(--color-off-white);
	--c-text-2: rgb(var(--rgb-off-white) / 0.84);      /* 7.9:1 */
	--c-text-3: rgb(var(--rgb-beige) / 0.86);          /* 5.6:1 */
	--c-hairline: rgb(var(--rgb-off-white) / 0.18);
	--c-hairline-strong: rgb(var(--rgb-off-white) / 0.32);
	--c-accent: var(--color-beige);                    /* 7.1:1 */
	--c-focus-halo: rgb(var(--rgb-ink) / 0.6);
	--c-scheme: dark;
	--glass-bg: rgb(var(--rgb-off-white) / 0.08);
	--glass-bg-strong: rgb(var(--rgb-off-white) / 0.14);
	--glass-border: rgb(var(--rgb-off-white) / 0.2);
	--glass-border-strong: rgb(var(--rgb-off-white) / 0.3);
}