/* ==========================================================================
   Design tokens
   The palette starts from the deep-black cinematic direction and is tuned to
   the logo: the hexagon's facet colours supply the secondary accents, and the
   red is reserved for action — buttons, active markers, focus, hairline detail.
   ========================================================================== */

:root {
  /* --- surfaces ------------------------------------------------------- */
  --bg: #080808;
  --bg-2: #111111;
  --surface: #171717;
  --surface-2: #1e1e1e;
  --surface-raised: #242424;

  /* --- ink ------------------------------------------------------------ */
  --ink: #ffffff;
  --ink-2: #b3b3b3;
  --ink-3: #8a8a8a;
  --ink-4: #5e5e5e;

  /* --- lines ---------------------------------------------------------- */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.28);

  /* --- brand ----------------------------------------------------------
     Sampled directly from the hexagon in main-logo.png. The azure facet is
     the mark's dominant colour by a wide margin, so it carries the brand;
     the teal facet is the single secondary. Gold, violet and indigo are kept
     only for the fine edge detail that already quotes the full hexagon. */
  --logo-azure: #1997c3;
  --logo-teal: #359c86;
  --logo-gold: #e0af67;
  --logo-violet: #8a39a9;
  --logo-indigo: #2b428c;

  /* Filled controls need white text at 4.5:1, which the bright azure cannot
     give, so buttons use a deeper shade of the same facet and wear the bright
     azure as their edge — that keeps the control separated from the page. */
  --brand-primary: #12719c;
  --brand-primary-hover: #157faf;
  --brand-primary-edge: var(--logo-azure);
  --brand-on-primary: #ffffff;

  /* Marks that sit directly on the near-black page: rules, active states,
     focus rings, small indicators. 3.9:1 against #080808. */
  --brand-accent: var(--logo-azure);
  --brand-secondary: var(--logo-teal);
  --brand-gradient: linear-gradient(135deg, var(--logo-azure), var(--logo-teal));

  /* Error red stays red: it signals a state, not the brand. */
  --danger: #d94452;
  --danger-ink: #ff8a94;

  /* --- scrims --------------------------------------------------------- */
  --scrim-bottom: linear-gradient(to top, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.82) 22%, rgba(8, 8, 8, 0.42) 52%, rgba(8, 8, 8, 0.08) 78%, rgba(8, 8, 8, 0) 100%);
  --scrim-side: linear-gradient(to var(--to-end), rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.6) 38%, rgba(8, 8, 8, 0.14) 68%, rgba(8, 8, 8, 0) 100%);
  --scrim-flat: linear-gradient(to top, rgba(8, 8, 8, 0.88), rgba(8, 8, 8, 0.55) 45%, rgba(8, 8, 8, 0.32));
  --scrim-tile: linear-gradient(to top, rgba(8, 8, 8, 0.94) 4%, rgba(8, 8, 8, 0.62) 38%, rgba(8, 8, 8, 0.12) 72%, rgba(8, 8, 8, 0.02) 100%);

  /* --- type ----------------------------------------------------------- */
  --font-sans: 'Alexandria', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Inter', 'Alexandria', system-ui, sans-serif;

  /* Hero scale: sized so the lockup keeps its presence without crowding the
     statistics that now share the same scene. */
  --fs-hero-title: clamp(2.35rem, 1.15rem + 4vw, 5rem);
  --fs-hero-alt: clamp(1.55rem, 0.85rem + 2.4vw, 3.15rem);
  --fs-hero-lead: clamp(1rem, 0.95rem + 0.28vw, 1.18rem);

  --fs-display: clamp(2.6rem, 1.15rem + 6.1vw, 6.4rem);
  --fs-h1: clamp(2.2rem, 1.25rem + 4vw, 4.6rem);
  --fs-h2: clamp(1.8rem, 1.15rem + 2.6vw, 3.4rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  --fs-h4: clamp(1.1rem, 0.98rem + 0.5vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 0.96rem + 0.42vw, 1.32rem);
  --fs-body: clamp(0.985rem, 0.94rem + 0.2vw, 1.075rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --fs-xs: 0.8rem;
  --fs-stat: clamp(2.15rem, 1.2rem + 3vw, 4.1rem);

  --lh-tight: 1.1;
  --lh-head: 1.24;
  --lh-body: 1.75;
  --tr-display: -0.02em;
  --tr-eyebrow: 0.18em;

  --measure: 66ch;
  --measure-tight: 52ch;

  /* --- rhythm --------------------------------------------------------- */
  --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;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --shell: 82.5rem;
  --shell-pad: clamp(1.15rem, 0.6rem + 2.4vw, 3.5rem);
  --masthead-h: 102px;

  /* --- shape ---------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* --- motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid: 380ms;
  --t-slow: 720ms;

  /* --- direction-aware helpers ---------------------------------------- */
  --to-end: left;
  --dir: 1;
}

[dir='ltr'] {
  --to-end: right;
  --dir: 1;
}

[dir='rtl'] {
  --to-end: left;
}

html[lang='en'] {
  --font-sans: 'Inter', 'Alexandria', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lh-body: 1.7;
}

/* ==========================================================================
   Inner-page type scale

   The homepage is a cinematic opening and keeps the display scale above. Inner
   pages are read rather than announced, so they take a tighter scale: the same
   tokens, re-declared once on the body of every page except the homepage.
   Because every component already sizes itself from these tokens, this single
   block retunes the whole set — no per-class overrides, no !important, and
   index.php cannot be touched by it.
   ========================================================================== */

body.page:not(.page--index) {
  --fs-h1: clamp(2.2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.08rem + 0.55vw, 1.6rem);
  --fs-h4: clamp(1.02rem, 0.95rem + 0.22vw, 1.18rem);
  --fs-lead: clamp(1rem, 0.94rem + 0.28vw, 1.16rem);
  --fs-body: clamp(1rem, 0.95rem + 0.18vw, 1.08rem);

  /* Heading leading, per level. --lh-head is the H2 default; the page title
     and the smaller headings set their own below. */
  --lh-head: 1.2;
  --lh-page-title: 1.08;
  --lh-h3: 1.35;
  --lh-h4: 1.45;
}

/* Arabic sets solid and needs a little more room between lines at every level. */
html[lang='ar'] body.page:not(.page--index) {
  --lh-head: 1.34;
  --lh-page-title: 1.22;
  --lh-h3: 1.5;
  --lh-h4: 1.6;
}