/* ============================================================
   ZENITH LABS — Design Tokens
   Swiss inspired. Science driven.
   ============================================================ */

:root {
  /* ---------- Ground / Ink ---------- */
  --bone:        #F4F4F1;   /* primary light ground */
  --bone-2:      #EAEAE5;   /* recessed light surface */
  --bone-3:      #DEDED8;   /* borders on light */
  --paper:       #FFFFFF;   /* cards on light */

  --ink:         #0F1114;   /* primary dark ground */
  --ink-2:       #171A1F;   /* raised dark surface */
  --ink-3:       #23272E;   /* dark card (deck business card) */
  --ink-4:       #333941;   /* borders on dark */

  /* ---------- Brand ---------- */
  --red:         #C8102E;   /* Swiss red — primary */
  --red-hot:     #E11B39;   /* hover / active */
  --red-deep:    #97091F;   /* pressed */
  --red-wash:    rgba(200, 16, 46, 0.08);

  --blue:        #1D4E9B;   /* secondary accent (minor) */
  --gold:        #C08A3E;   /* tertiary accent (minor) */

  /* ---------- Text ---------- */
  --tx-hi:       #0F1114;   /* on light: primary */
  --tx-mid:      #4A5058;   /* on light: secondary */
  --tx-lo:       #767C85;   /* on light: tertiary */

  --tx-hi-d:     #F4F4F1;   /* on dark: primary */
  --tx-mid-d:    #A2A8B0;   /* on dark: secondary */
  --tx-lo-d:     #6E757E;   /* on dark: tertiary */

  /* Contextual text — flipped by [data-ground] */
  --fg:          var(--tx-hi);
  --fg-mid:      var(--tx-mid);
  --fg-lo:       var(--tx-lo);
  --bg:          var(--bone);
  --rule:        var(--bone-3);
  --surface:     var(--paper);

  /* ---------- Type families ---------- */
  --ff-display:  "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --ff-body:     "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ff-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Fluid type scale ----------
     Deliberate rule: Jost never renders below ~52px. At 22-60px a geometric
     grotesk reads as amateur Futura; at 100px+ it reads as construction.
     Below that threshold Inter (prose) and IBM Plex Mono (anything measured,
     labelled or navigational) own the page. No two families ever compete at
     the same size, which is what stops a three-Google-font stack looking
     assembled. Top-to-bottom ratio is ~13:1, not the 5.6:1 of a theme. */
  --fs-mega:     clamp(3rem, 11.4vw, 10.5rem);   /* statement moments only */
  --fs-hero:     clamp(2.9rem, 7.2vw, 6.6rem);
  --fs-d1:       clamp(2.1rem, 4.1vw, 3.35rem);  /* every section headline */
  --fs-d2:       clamp(1.7rem, 2.6vw, 2.1rem);   /* sub-heads */
  --fs-d3:       clamp(1.25rem, 1.7vw, 1.45rem);
  --fs-lead:     1.0625rem;                      /* prose, full strength */
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-label:    0.6875rem;   /* mono eyebrows */
  --fs-micro:    0.625rem;

  /* ---------- Tracking ---------- */
  --tr-hero:     -0.045em;   /* tight on display */
  --tr-display:  -0.03em;
  --tr-body:     -0.005em;
  --tr-label:    0.22em;     /* wide on mono eyebrows */
  --tr-wordmark: 0.42em;     /* ZENITH lockup */
  --tr-labs:     0.62em;     /* LABS beneath */

  /* ---------- Leading ---------- */
  --lh-hero:     0.92;
  --lh-display:  1.04;
  --lh-lead:     1.5;
  --lh-body:     1.65;
  --lh-tight:    1.2;

  /* ---------- Space scale (8px base, Swiss grid) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  160px;
  --s-12:  200px;

  --section-y:   clamp(72px, 11vw, 160px);
  --gutter:      clamp(20px, 4.5vw, 64px);
  --maxw:        1440px;
  --maxw-text:   62ch;

  /* ---------- Radii — Swiss = near-square ---------- */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-1:  0 1px 2px rgba(15, 17, 20, 0.04),
           0 2px 8px rgba(15, 17, 20, 0.04);
  --sh-2:  0 2px 4px rgba(15, 17, 20, 0.05),
           0 8px 24px rgba(15, 17, 20, 0.07);
  --sh-3:  0 4px 8px rgba(15, 17, 20, 0.06),
           0 18px 48px rgba(15, 17, 20, 0.11);
  --sh-red: 0 6px 24px rgba(200, 16, 46, 0.28);

  /* ---------- Motion ----------
     Engineered, not bouncy. Instrument needles settling. */
  --e-out:    cubic-bezier(0.16, 1, 0.30, 1);    /* primary reveal */
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);    /* state change */
  --e-swiss:  cubic-bezier(0.22, 0.61, 0.24, 1); /* mechanical settle */
  --e-snap:   cubic-bezier(0.5, 0, 0, 1);        /* decisive */

  --t-fast:   160ms;
  --t-base:   280ms;
  --t-slow:   560ms;
  --t-reveal: 900ms;

  /* ---------- Z layers ---------- */
  --z-canvas:    0;
  --z-content:   2;
  --z-sticky:    50;
  --z-header:    100;
  --z-drawer:    200;
  --z-overlay:   300;
  --z-toast:     400;
}

/* ============================================================
   Ground contexts — one attribute flips the whole palette.
   Every section declares its ground; components read --fg/--bg.
   ============================================================ */

[data-ground="dark"] {
  --fg:      var(--tx-hi-d);
  --fg-mid:  var(--tx-mid-d);
  --fg-lo:   var(--tx-lo-d);
  --bg:      var(--ink);
  --rule:    var(--ink-4);
  --surface: var(--ink-3);
}

[data-ground="light"] {
  --fg:      var(--tx-hi);
  --fg-mid:  var(--tx-mid);
  --fg-lo:   var(--tx-lo);
  --bg:      var(--bone);
  --rule:    var(--bone-3);
  --surface: var(--paper);
}

[data-ground="paper"] {
  --fg:      var(--tx-hi);
  --fg-mid:  var(--tx-mid);
  --fg-lo:   var(--tx-lo);
  --bg:      var(--paper);
  --rule:    var(--bone-3);
  --surface: var(--bone);
}