/* ============================================================
   Design tokens - "Desert daylight, federation-grade data"
   LIGHT, fully-warm palette keyed to the festival logo.
   Logo anchors: pink #E54B7C, coral #E96C4E, orange #EC8A2E,
   cool wordmark gray #787884.
   The signature brand gradient reads orange -> coral -> pink.

   PALETTE DECISION (binding, per brief):
   - Fully warm. No green, no literal gold, no separate crimson hue.
   - Legacy accent token NAMES are preserved (--gold/--green/--crimson/--amber)
     and only their VALUES are re-pointed to warm equivalents, so every
     dependent file updates automatically.
   - Functional states stay mutually distinguishable by LIGHTNESS +
     SATURATION + the views' icon/shape/position channels, NEVER hue alone.
   - Runner palette is a DELIBERATE warm-biased-but-distinct exception
     (documented at that block) so a 7-camel race stays readable.
   ============================================================ */
:root {
  /* --- surfaces: warm desert daylight ---
     A coherent light ramp. --night is the warm-white PAGE base; --ink and
     --surface are the (near) white CARD faces; --surface-2/-3 are sand-tinted
     secondary/tertiary depth tiers used for insets, zebra rows and hover. */
  --night:        #FBF8F4;   /* page base (warm white) */
  --ink:          #FFFFFF;   /* card face (pure white), also --dune-2 base intent */
  --surface:      #FFFFFF;   /* primary card/panel surface */
  --surface-2:    #FAF3EA;   /* secondary surface: inset panels, zebra rows */
  --surface-3:    #F3E9DA;   /* tertiary surface: hover / elevated */
  --line:         #E4D8C8;   /* primary border / divider (warm gray, visible on white) */
  --line-soft:    #EFE7DB;   /* softer inner hairline rule */

  /* --- text on light (warm-gray ink derived from the #787884 wordmark family,
         darkened to clear WCAG AA on white) --- */
  --text:         #2B2420;   /* primary body text (~13.4:1 on white) */
  --text-strong:  #1A1411;   /* high-emphasis headings (~16.8:1 on white) */
  --sand:         #6A5B49;   /* secondary/descriptive text (~5.6:1 on white) */
  --sand-dim:     #8A7B66;   /* tertiary text / watermarks (~3.9:1 - large/UI only) */
  --muted:        #6E6052;   /* muted but readable body text (~5.3:1 on white) */
  --on-warm:      #FFFFFF;   /* on-brand text used ON saturated warm gradient/fills */

  /* --- accents (names preserved, values re-pointed to the warm arc) ---
     Each functional family has a BRIGHT value (fills/borders/glyphs, >=3:1 on
     white for UI/graphic) and a DEEP value (text on white, >=4.5:1).
     HONORS = deep terracotta-bronze (richest, most saturated, reserved).
     LIVE/POSITIVE = coral (lighter, peachy, high lightness).
     ALERT/HEART = festival pink/magenta (darker, more saturated than live).
     WELFARE = warm marigold amber (yellow-shifted, clearly off the pink/coral). */
  /* Canonical festival-logo anchors (additive; the functional accents below
     derive visibly from these). pink/coral/orange = the logo arc;
     ink = the cool wordmark gray. */
  --brand-pink:   #E54B7C;   /* festival pink (logo) */
  --brand-coral:  #E96C4E;   /* festival coral (logo) */
  --brand-orange: #EC8A2E;   /* festival orange (logo) */
  --brand-ink:    #787884;   /* cool wordmark gray (logo) */
  --gold:         #C2410C;   /* honors / Sword / records ONLY (burnt terracotta, ~4.7:1 on white) */
  --gold-deep:    #9A2D08;   /* pressed/text-on-light honor (~6.8:1 on white) */
  --gold-soft:    #F6C89A;   /* pale honor tint (badge fills, glow edges) */
  --green:        var(--brand-coral);   /* live data / speed / positive (festival coral #E96C4E) */
  --green-deep:   #B5421F;   /* deep coral: gradient depth, pressed/text (~4.6:1 on white) */
  --green-glow:   #F39A7E;   /* light coral: selection/focus glow, speed numerals fill */
  --crimson:      #D81B60;   /* heart rate / alert / live (festival pink-magenta, ~4.6:1 on white) */
  --crimson-soft: #F4A6C2;   /* soft pink tint: chip bg, pulse glow edges */
  --crimson-deep: #9E1248;   /* pressed/hover magenta (~8:1 on white, white text on it) */
  --amber:        #9B5E00;   /* welfare conditional hue ONLY (marigold, ~5.3:1 on white) */
  --amber-soft:   #FBE3B8;   /* pale marigold chip background */

  /* --- gradients (rewritten via var() refs so token re-points flow through) --- */
  --grad-gold:  linear-gradient(135deg, var(--gold-soft) 0%, var(--brand-orange) 38%, var(--gold-deep) 100%);
  --grad-green: linear-gradient(120deg, var(--green-glow) 0%, var(--green) 60%, var(--green-deep) 100%);
  /* signature brand gradient orange -> coral -> pink (top-right to bottom-left) */
  --grad-brand: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-coral) 52%, var(--brand-pink) 100%);
  /* "night" name kept; now a warm daylight sky ramp (was a near-black radial) */
  --grad-night: radial-gradient(120% 120% at 80% -10%, #FFF4E6 0%, #FBF1E3 45%, #F5E7D2 100%);

  /* --- type --- */
  /* Readable, common Arabic UI typeface (Thamanyah-grade legibility).
     IBM Plex Sans Arabic carries headings + body; Tajawal as common fallback.
     Decorative/calligraphic families are reserved for ceremonial honors only. */
  --f-display: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif; /* AR + UI display */
  --f-calig:   "Aref Ruqaa", "Reem Kufi", serif;                 /* ceremonial honors ONLY */
  --f-body:    "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;         /* telemetry digits */
  --f-en-display: "Cormorant Garamond", Georgia, serif;          /* EN ceremonial display */

  /* --- spacing / radius / shadow --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --container: 1240px;
  --gutter: clamp(18px, 4vw, 56px);

  /* shadows: soft, warm-tinted, low opacity for a light editorial surface */
  --sh-1: 0 2px 10px rgba(80,40,20,.10);
  --sh-2: 0 18px 50px -18px rgba(80,40,20,.18);
  --sh-gold:  0 8px 28px -10px rgba(236,138,46,.28);
  --sh-green: 0 0 0 1px rgba(233,108,78,.30), 0 10px 32px -12px rgba(233,108,78,.24);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* --- scrim / overlay helpers ---
     Header/modal scrims are warm-white frosted glass on a light page.
     Image-darkening overlays are a faint dark wash (not near-opaque). */
  --scrim:        rgba(251,248,244,.90);
  --scrim-strong: rgba(251,248,244,.96);
  --scrim-soft:   rgba(0,0,0,.12);
  --overlay-1:    rgba(0,0,0,.12);
  /* fixed dark warm scrim for DATA overlays that must obscure content on ANY
     theme (e.g. win-prob redline). Pinned literal - never theme-driven. */
  --scrim-data:   rgba(50,18,8,.76);
  /* dramatic warm-dark backdrop for media embeds / a single editorial "feature"
     band (e.g. stadium iframe, rivalry section). Pinned dark on purpose; pair
     with --on-theater for legible light text. */
  --theater:      #1A120B;
  --on-theater:   #F7EFE2;

  /* --- runner palette tokens ---
     DELIBERATE EXCEPTION: a 7-camel race must be tellable apart at 18px dots
     and on overlapping SVG polylines, so distinctness beats literal warmth
     (brief permits). Chosen for genuine PERCEPTUAL separation (min CIEDE2000
     ~16-18 between every pair), with two warm brand leaders (coral, amber-gold)
     plus five maximally-separated anchors. Pair with the heavier stroke-width +
     dasharray channels on the SVG so identity also survives by shape + thickness.
     (Distinctness here is hue / delta-E, NOT WCAG ratio - two runners can share
     luminance yet read as obviously different colors.) */
  --runner-1: #E9663E;   /* coral (warm brand leader) */
  --runner-2: #D99100;   /* amber-gold (warm; reinforce thin strokes with a ring) */
  --runner-3: #0E9298;   /* teal */
  --runner-4: #7A4DE0;   /* violet */
  --runner-5: #D81B72;   /* festival magenta */
  --runner-6: #3F9D2F;   /* forest green */
  --runner-7: #1D4ED8;   /* royal blue */

  /* --- dune layer tokens ---
     Broken out from the surface tokens (which are now white) to standalone
     warm-sand tones so the hero dune silhouettes read against the light sky. */
  --dune-1: #D7BE98;   /* nearest dune (mid sand) */
  --dune-2: #C2A578;   /* mid-distance dune */
  --dune-3: #AC8C5F;   /* farthest dune (darkest sand, reads on light sky) */
}

/* EN mode: keep headings on the readable sans; reserve the serif for ceremony */
html[lang="en"] {
  --f-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-calig: var(--f-en-display);
}

/* ---- M-08: High-contrast overrides ---- */
/* LIGHT high-contrast variant: near-white surfaces, near-black text,
   max-contrast warm accents (all darkened to clear >=4.5:1 on white). */
@media (prefers-contrast: more) {
  :root {
    --surface:     #FFFFFF;
    --surface-2:   #FFFFFF;
    --surface-3:   #F5EFE6;
    --night:       #FFFFFF;
    --ink:         #FFFFFF;
    --text:        #0D0600;
    --text-strong: #000000;
    --sand:        #1A1008;
    --sand-dim:    #1A1008;
    --muted:       #2A1C0C;
    --line:        #1A1008;
    --line-soft:   #3A2A18;
    --gold:        #8C3A00;   /* max-contrast honor terracotta (~7.2:1 on white) */
    --gold-deep:   #6E2C00;
    --green:       #A8350F;   /* max-contrast live coral (~6.1:1 on white) */
    --green-deep:  #7E2408;
    --green-glow:  #A8350F;
    --crimson:     #A60049;   /* max-contrast alert pink (~7.0:1 on white) */
    --crimson-soft:#A60049;
    --amber:       #7E4E00;   /* max-contrast welfare marigold (~6.8:1 on white) */
    --amber-soft:  #7E4E00;
  }

  /* M-08: grain and vignette off in high-contrast mode */
  .grain,
  .vignette {
    display: none;
    opacity: 0;
  }
}

/* ---- Calligraphic khatt reveal ---- */
/* Phase 1: name is in --f-calig. Reveal via clip-path (ink draws from start to end). */
/* Phase 2: .calligraphic-reveal--done transitions font to --f-display (IBM Plex Sans Arabic). */
@keyframes khatt-draw {
  from { clip-path: inset(0 100% 0 0); opacity: 0.2; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

.calligraphic-reveal {
  animation: khatt-draw 0.9s var(--ease-out) both;
  clip-path: inset(0 0% 0 0);
}

.calligraphic-reveal--done {
  font-family: var(--f-display);
  animation: none;
  clip-path: none;
  transition: font-family 0s, opacity 0.4s var(--ease-out);
  opacity: 1;
}

/* ---- M-08: Reduced-motion overrides ---- */
/* Disables embers, count-ups, and calligraphic reveal.
   NEVER targets telemetry selectors (.gauge, .speed-bar, #telemetry). */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .ember,
  .particle,
  .count-up,
  .calligraphic-reveal,
  .hero__dunes,
  .ticker,
  .grain,
  .vignette,
  [data-count],
  .ghost-token,
  .ghost-token__trail,
  .ghost-teaser__trail,
  .sector-flash {
    animation: none !important;
    transition: none !important;
  }
}

/* Belt-and-braces JS guard hook: the renderer adds .no-motion under
   prefers-reduced-motion so the signature ghost crossing snaps instead of
   animating, even where the media query is unavailable (older engines). The
   per-tick gap numerals and ECG points keep updating regardless. */
.ghost-token.no-motion { transition: none !important; }
.sector-flash.no-motion { animation: none !important; }