/*
  SYHF 2026 (Saudi Youth Healthcare Forum) — Design Tokens
  Locked to SYHS-2026-Design-Standard.md Section 3 (Color) and Section 2 (Typography) —
  written pre-rename, rules still apply 1:1 post-rename. No hex values should
  appear outside this file — every color in the mockup traces back to a role
  defined here. Internal variable names keep the --syhs- prefix (legacy/
  internal only, never user-facing) to avoid a purely cosmetic rename risking
  a missed reference; every visible string in the markup says SYHF.
*/

/* woff2 only. Every browser that supports CSS custom properties — which this
   site requires to render at all — has supported woff2 since 2014, so the .otf
   fallbacks were 400KB that nothing would ever request. */
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------
     COLOR — locked roles only. Do not add a hue without a stated role.
     --------------------------------------------------------------------- */

  /* Primary ground — dominant backgrounds, headers */
  --syhs-ground: #50317c;
  --syhs-ground-rgb: 80, 49, 124;

  /* Primary accent (green) — key numbers, CTAs, active/success states ONLY */
  --syhs-signal: #3b8545;
  --syhs-signal-alt: #3f9a76; /* teal-green variant, used interchangeably per brand kit */
  --syhs-signal-rgb: 63, 154, 118;

  /* Tints — hover states, subtle fills, sparingly */
  --syhs-tint-violet: #9682ca;
  --syhs-tint-violet-rgb: 150, 130, 202;
  --syhs-tint-mint: #66d3a1;
  --syhs-tint-mint-rgb: 102, 211, 161;

  /* Secondary — section-background variation only, never UI chrome */
  --syhs-navy: #0e476a;
  --syhs-navy-rgb: 14, 71, 106;
  --syhs-deep-violet: #402768;

  /* Lightened navy — the Research track's identity in the components chooser.
     Navy alone is too dark to read as a crest/accent against the ground, and
     the three tracks need one identity each from the three locked families
     (violet / green / navy). Accent and crest use only. */
  --syhs-tint-sky: #4f9fd0;
  --syhs-tint-sky-rgb: 79, 159, 208;

  /* Error text. The light value is for form surfaces on paper; the dark one
     is for the apply/dashboard surfaces, where the light red drops to ~2.6:1
     and fails AA. Functional colour only — always paired with a glyph or
     wording, never carrying the meaning on its own. */
  --syhs-error: #b3261e;
  --syhs-error-on-dark: #ff8a80;

  /* Neutral scale — body text, dividers, form fields */
  --syhs-ink: #16121f;          /* near-black with a violet cast, for text on light */
  --syhs-ink-soft: #4a4458;
  --syhs-paper: #faf9fc;         /* off-white ground for light sections */
  --syhs-white: #ffffff;
  --syhs-line: rgba(255, 255, 255, 0.16);   /* dividers on dark */
  --syhs-line-on-light: rgba(22, 18, 31, 0.12);

  /* Derived surfaces (still traceable to locked roles above) */
  --syhs-surface-1: var(--syhs-ground);
  --syhs-surface-2: var(--syhs-deep-violet);
  --syhs-surface-3: var(--syhs-navy);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     Neue Montreal now loads for real (licensed .otf files supplied,
     @font-face above) — no more Switzer placeholder. Fraunces is the
     paired display/editorial serif — free, variable, high-contrast,
     avoids the Playfair-Display default-luxury read.

     Arabic: Neue Montreal and Fraunces have no Arabic glyphs, so the
     Arabic build pairs with Cairo (Google Fonts, free, geometric sans
     designed for exactly this kind of bilingual Latin/Arabic pairing,
     widely used across Saudi institutional sites) across the weight
     range Neue Montreal covers here. Arabic intentionally uses one
     typeface for both body and editorial moments rather than hunting
     for a high-contrast Arabic display serif to match Fraunces — an
     ornate calligraphic pairing would read as a mismatched afterthought
     bolted onto the English system, not the same system in two languages.
     Hierarchy in Arabic comes from weight/size jumps, same as English.
     --------------------------------------------------------------------- */

  --font-sans: 'Neue Montreal', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Georgia is the universal step: Iowan Old Style is macOS-only, so without it
     a Fraunces failure on Windows dropped straight to a default serif. */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  /* Neue Montreal has no Arabic glyphs, so listing it here was a wasted step in
     the chain. These are the real system Arabic faces: Geeza Pro on Apple,
     Segoe UI and Tahoma on Windows, Noto Sans Arabic on Android and Linux. */
  --font-arabic: 'Cairo', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;

  /* Type scale — deliberate jumps, not uniform bumps (Design Standard §2) */
  --fs-eyebrow: 0.8125rem;   /* 13px */
  --fs-body: 1.0625rem;      /* 17px */
  --fs-body-lg: 1.25rem;     /* 20px */
  --fs-h3: 1.75rem;          /* 28px */
  --fs-h2: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);   /* 36 → 56 */
  --fs-h1: clamp(3rem, 1.4rem + 6vw, 6.5rem);        /* 48 → 104 */
  --fs-numeral: clamp(3.5rem, 1.8rem + 6vw, 7.5rem); /* stats/countdown — bigger than H1 on purpose */

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  --tracking-tight: -0.03em;
  --tracking-tighter: -0.045em;
  --tracking-wide: 0.14em;

  /* ---------------------------------------------------------------------
     MOTION — distinct eases per context, per Design Standard §6
     ("shouldn't all use the identical cubic-bezier")
     --------------------------------------------------------------------- */
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);      /* helix line draw-in */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);   /* headline/word reveal, decelerated */
  --ease-mechanical: cubic-bezier(0.83, 0, 0.17, 1); /* countdown digit roll, sharp in/out */
  --ease-counter: cubic-bezier(0.22, 0.61, 0.36, 1); /* stat count-up */

  /* ---------------------------------------------------------------------
     SPACE / SHAPE
     --------------------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 10rem;

  --container-max: 90rem;
  --gutter: clamp(1.5rem, 4vw, 5rem);

  --radius-sm: 6px;
  --radius-md: 14px;
  --focus-ring: 0 0 0 3px var(--syhs-paper), 0 0 0 5px var(--syhs-signal-alt);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-draw: linear;
    --ease-editorial: linear;
    --ease-mechanical: linear;
    --ease-counter: linear;
  }
}