/* ==========================================================================
   ZAIN EXHIBITIONS — DESIGN TOKENS  ·  "The Hall at Night"
   design/tokens.css  ·  v1.0  ·  2026-09
   --------------------------------------------------------------------------
   Layering:  primitives (--z-*)  ->  semantic aliases (--color-*, --s-*, ...)
   Default theme is DARK (the hall after hours). [data-theme="light"] overrides
   the semantic layer only; primitives never change. Works on <html> or on any
   wrapper element, so both themes can render on one page (see preview.html).
   Strict 8px grid: every --s-* token is a multiple of 8. The only half-step is
   --s-half (4px) for icon / inline alignment.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- 1. PRIMITIVES · colour ---------- */
  --z-deep-hall:    #061716;  /* page background                */
  --z-hall-surface: #0B2423;  /* cards, panels                  */
  --z-hall-raised:  #10312F;  /* hover / raised panels          */
  --z-line:         #1E3F3D;  /* hairlines, dividers            */
  --z-line-strong:  #2A5350;  /* stronger borders on Deep       */
  --z-zain-teal:    #01A79F;  /* brand teal (logo)              */
  --z-signal:       #3EE6D8;  /* luminous teal glass, focus     */
  --z-ember:        #F7901E;  /* brand orange, use sparingly    */
  --z-fog:          #DCE9E7;  /* body text on dark              */
  --z-mist:         #8FA8A5;  /* muted text on dark             */
  --z-chalk:        #F4F7F7;  /* light surface (print/profile)  */
  --z-ink:          #1F2629;  /* text on light                  */
  /* light-theme helpers (derived, contrast-checked, see DESIGN.md §3) */
  --z-teal-ink:     #0B7F79;  /* teal for TEXT / buttons on Chalk (4.51:1) */
  --z-ember-ink:    #B25407;  /* ember for TEXT on Chalk (AA)              */
  --z-slate:        #566B69;  /* muted text on Chalk (5.26:1)              */
  --z-chalk-surface:#FFFFFF;
  --z-chalk-raised: #E6EFEE;
  --z-chalk-line:   #C9D8D6;

  /* ---------- 2. SEMANTIC · colour (dark default) ---------- */
  --color-bg:            var(--z-deep-hall);
  --color-surface:       var(--z-hall-surface);
  --color-raised:        var(--z-hall-raised);
  --color-line:          var(--z-line);
  --color-line-strong:   var(--z-line-strong);
  --color-text:          var(--z-fog);
  --color-text-muted:    var(--z-mist);
  --color-text-strong:   #FFFFFF;
  --color-brand:         var(--z-zain-teal);   /* logo, brand fills            */
  --color-brand-text:    var(--z-signal);      /* teal used AS TEXT            */
  --color-accent:        var(--z-signal);      /* luminous highlight, links    */
  --color-ember:         var(--z-ember);
  --color-ember-text:    var(--z-ember);       /* ember used AS TEXT           */
  --color-on-accent:     var(--z-deep-hall);   /* text on Signal / Teal fills  */
  --color-on-ember:      var(--z-deep-hall);   /* text on Ember fills          */
  --color-focus:         var(--z-signal);
  --color-link:          var(--z-signal);
  --color-selection:     rgba(62, 230, 216, .32);
  --color-scrim:         rgba(6, 23, 22, .72);
  --color-glass:         rgba(62, 230, 216, .08);
  --color-glass-line:    rgba(62, 230, 216, .24);
  --color-logo:          var(--z-zain-teal);   /* logo on dark = teal or white */

  /* ---------- 3. SPACING · 8px grid ---------- */
  --s-half: 4px;   /* ONLY for icon / inline optical alignment */
  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  80px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  /* section rhythm (fluid, snaps to 8 at both ends) */
  --hall-pad:  clamp(var(--s-8), 6vw + var(--s-4), var(--s-11)); /* 80 -> 160 */
  --stand-gap: clamp(var(--s-4), 3vw,             var(--s-7));  /* 32 -> 64  */
  --gutter:    clamp(var(--s-2), 4vw,             var(--s-7));  /* 16 -> 64  */
  --container: 1280px;
  --container-narrow: 800px;
  --measure: 64ch;

  /* ---------- 4. TYPOGRAPHY ---------- */
  --font-display: "Big Shoulders Display", "Bahnschrift Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --font-arabic:  "Cairo", "Segoe UI", Tahoma, sans-serif;

  /* fluid sizes: min / max are multiples of 8 (or 4 for small labels) */
  --fs-hero:   clamp(64px, 5vw + 40px, 128px);  /* H1 / hero numbers   */
  --fs-1:      clamp(48px, 3vw + 24px,  80px);  /* H2 hall titles      */
  --fs-2:      clamp(32px, 1.5vw + 20px, 48px); /* H3 stand titles     */
  --fs-3:      clamp(24px, .5vw + 20px,  32px); /* H4                  */
  --fs-lead:   clamp(20px, .25vw + 18px, 24px); /* lead paragraph      */
  --fs-body:   16px;
  --fs-small:  14px;
  --fs-micro:  12px;
  --fs-stat:   clamp(56px, 4vw + 24px,  96px);  /* key numbers (Ember) */

  /* line heights on the 8px rhythm */
  --lh-tight:   1;     /* display: line box == font size            */
  --lh-heading: 1.1;   /* H2-H4; paired with 8px margins            */
  --lh-lead:   32px;
  --lh-body:   24px;
  --lh-small:  24px;
  --lh-micro:  16px;

  --tracking-display: .01em;
  --tracking-label:   .14em;
  --tracking-mono:    .06em;

  --fw-display:   800;
  --fw-display-2: 700;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* ---------- 5. RADII ---------- */
  --r-1: 8px;
  --r-2: 16px;
  --r-3: 24px;
  --r-pill: 999px;

  /* ---------- 6. STROKES (not spacing; hairlines are 1px / 2px) ---------- */
  --stroke:   1px;
  --stroke-2: 2px;

  /* ---------- 7. ELEVATION / GLOW ---------- */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, .45);
  --glow-signal: 0 0 0 1px var(--color-glass-line), 0 0 48px rgba(62, 230, 216, .18);
  --glow-ember:  0 0 32px rgba(247, 144, 30, .28);

  /* ---------- 8. MOTION ---------- */
  --dur-1: 160ms;   /* hover, colour                */
  --dur-2: 240ms;   /* reveal, small transforms     */
  --dur-3: 400ms;   /* panels, disclosure           */
  --dur-4: 800ms;   /* hero, 3D camera hand-offs    */
  --ease:    cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .9, .4);

  /* ---------- 9. Z-INDEX ---------- */
  --layer-below:   -1;   /* 3D canvas, ring artwork behind content */
  --layer-base:     0;
  --layer-raised:  10;   /* cards on hover, sticky captions        */
  --layer-sticky: 100;   /* hall labels, sticky headers            */
  --layer-nav:    200;   /* floor-plan mini-map                    */
  --layer-overlay:300;   /* lightbox, scrim                        */
  --layer-modal:  400;
  --layer-toast:  500;

  /* ---------- 10. BREAKPOINTS (reference only; CSS vars cannot drive @media) ---------- */
  /* xs 360px phone · sm 600px large phone · md 900px tablet · lg 1200px desktop · xl 1600px wide */
}

/* ==========================================================================
   LIGHT THEME  ·  Chalk (docs, deck, print, company profile)
   Applies to <html data-theme="light"> or any wrapper element.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;
  --color-bg:            var(--z-chalk);
  --color-surface:       var(--z-chalk-surface);
  --color-raised:        var(--z-chalk-raised);
  --color-line:          var(--z-chalk-line);
  --color-line-strong:   #A9BDBA;
  --color-text:          var(--z-ink);
  --color-text-muted:    var(--z-slate);
  --color-text-strong:   #000000;
  --color-brand:         var(--z-zain-teal);
  --color-brand-text:    var(--z-teal-ink);
  --color-accent:        var(--z-teal-ink);
  --color-ember:         var(--z-ember);
  --color-ember-text:    var(--z-ember-ink);
  --color-on-accent:     var(--z-chalk);
  --color-on-ember:      var(--z-ink);
  --color-focus:         var(--z-teal-ink);
  --color-link:          var(--z-teal-ink);
  --color-selection:     rgba(1, 167, 159, .28);
  --color-scrim:         rgba(31, 38, 41, .64);
  --color-glass:         rgba(1, 167, 159, .08);
  --color-glass-line:    rgba(1, 167, 159, .32);
  --color-logo:          var(--z-zain-teal);
  --shadow-1: 0 8px 24px rgba(31, 38, 41, .12);
  --shadow-2: 0 16px 48px rgba(31, 38, 41, .16);
  --glow-signal: 0 0 0 1px var(--color-glass-line);
  --glow-ember:  none;
}

/* ==========================================================================
   BASE  ·  minimal resets that make the tokens usable
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}
[data-theme] { background: var(--color-bg); color: var(--color-text); }
::selection { background: var(--color-selection); }
a { color: var(--color-link); text-underline-offset: var(--s-half); }
img, svg, video { display: block; max-width: 100%; }
:focus-visible { outline: var(--stroke-2) solid var(--color-focus); outline-offset: var(--stroke-2); }

/* Arabic (/ar/): swap display + body for Cairo, keep IBM Plex Mono for data */
[lang="ar"], [dir="rtl"] {
  --font-display: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-body:    "Cairo", "Segoe UI", Tahoma, sans-serif;
  --tracking-display: 0;
  --tracking-label: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}