/* ============================================================================
   SmartStack — Design Tokens
   ART DIRECTION: TECHNICAL BROADSHEET
   Swiss editorial grid x engineering spec sheet, printed in the SmartStack
   brand inks.

   Rules of the house — break these and it stops being this design:
     1. Cool white stock, deep navy ink, brand blue as the signal. Cyan is
        reserved for the second halftone plate and for accents on a brand-blue
        ground. Nothing else enters the palette.
     2. No gradients. No glass. No blur. No soft shadows.
     3. Square corners. Everywhere. Radius is 0.
     4. Depth comes from hairline RULES and hard OFFSET blocks, never elevation.
     5. On a brand-blue fill, text is WHITE (5.5:1). Blue clears 5.2:1 as text
        on the stock, so unlike a warm accent it may also be set small.
     6. Emphasis is INVERSION (ink floods the cell), not lift or glow.

   Editions: `day` (white stock, default) and `night` (navy stock).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LAYER 1 — PRIMITIVES
   --------------------------------------------------------------------------- */

:root {
  /* --- Stock: cool near-white, taken from the brand's light tints --- */
  --c-stock-50:  #ffffff;
  --c-stock-100: #f8f9ff;   /* the page */
  --c-stock-200: #eaf0ff;   /* tinted panel */
  --c-stock-300: #dbe4fa;   /* second tint */
  --c-stock-400: #b8c6e6;

  /* --- Ink: the brand's deep navy. Never pure black. --- */
  --c-ink-900: #070b1f;
  --c-ink-800: #0a0e27;    /* the ink */
  --c-ink-700: #131834;
  --c-ink-600: #1a1f3a;
  --c-ink-mid: #4a5578;
  --c-ink-400: #6b779c;
  --c-ink-300: #9aa4c2;

  /* --- Signal: brand blue. The one accent on the stock. --- */
  --c-signal:      #0066cc;
  --c-signal-deep: #0052a6;
  --c-signal-lite: #0099ff;   /* the night edition needs a brighter ink */
  --c-signal-tint: #e6f0ff;

  /* --- Cyan: the second plate only. Never body text — 1.9:1 on stock. --- */
  --c-cyan: #00ccff;

  /* --- Utility inks --- */
  --c-red:   #dc2626;
  --c-green: #059669;

  /* --- Rules: the whole design is built from these --- */
  --rule-hair:  rgb(10 14 39 / 0.18);
  --rule-soft:  rgb(10 14 39 / 0.09);
  --rule-solid: rgb(10 14 39 / 0.78);

  /* --- Spacing. 4px base, but the grid gutter is the real unit. --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --space-section:    clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --space-section-sm: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --space-gutter:     clamp(1rem, 0.5rem + 2.2vw, 2.25rem);

  /* The margin column that carries section numbers and labels. */
  --margin-col: clamp(0px, -6rem + 14vw, 9rem);

  /* --- Typography ---
     Archivo          grotesque with a width axis — condensed for headlines,
                      normal for reading. Does the work of two families.
     Instrument Serif the human voice: pull quotes and asides, in italic.
     Space Mono       every label, number, index and caption. The spec-sheet
                      register that holds the whole thing together. */
  --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body:    'Archivo', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Headlines run tight, condensed and very large. Body runs small and
     workmanlike. The gap between them is most of the art direction. */
  --text-mega:      clamp(3rem, 0.7rem + 10.2vw, 8.25rem);
  --text-display-1: clamp(2.75rem, 1.1rem + 7.2vw, 6.5rem);
  --text-display-2: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  --text-h2:        clamp(1.75rem, 1.15rem + 2.7vw, 3.25rem);
  --text-h3:        clamp(1.25rem, 1.08rem + 0.75vw, 1.625rem);
  --text-h4:        clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --text-lead:      clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  --text-serif-lead: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  --text-body:      1rem;
  --text-sm:        0.875rem;
  --text-xs:        0.8125rem;
  --text-label:     0.7875rem;   /* mono caps — the spec-sheet size */

  --leading-mega:    0.86;
  --leading-tight:   0.94;
  --leading-snug:    1.08;
  --leading-normal:  1.45;
  --leading-relaxed: 1.62;

  --track-mega:  -0.045em;
  --track-tight: -0.028em;
  --track-snug:  -0.012em;
  --track-label:  0.16em;
  --track-wide:   0.08em;

  /* Width axis — headlines are condensed, running text is not. */
  --width-condensed: 78;
  --width-normal:    100;

  /* --- Radius. There is none. It is a press, not an app. --- */
  --radius: 0px;

  /* --- Offset blocks replace shadows entirely --- */
  --offset:    4px;
  --offset-lg: 7px;

  /* --- Motion. Mechanical: fast, sharp, no float. --- */
  --dur-snap:   110ms;
  --dur-fast:   180ms;
  --dur-base:   300ms;
  --dur-slow:   520ms;
  --dur-wipe:   760ms;
  --dur-ticker: 42s;

  /* A hard, machined curve — decisive stop. Nothing springs or overshoots. */
  --ease-press:  cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-cut:    cubic-bezier(0.85, 0, 0.15, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear: linear;

  /* --- Z-index --- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-nav:      200;
  --z-drawer:   300;
  --z-toast:    500;
  --z-shutter:  600;

  /* --- Layout --- */
  --container:      1400px;
  --container-text: 68ch;
  --nav-height:     98px;

  /* --- Paper grain. An SVG turbulence tile, inlined so it costs no request
         and cannot be blocked by the CSP (img-src allows data:). Kept light:
         a cool white stock shows grain far more than a warm one. --- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   LAYER 2 — SEMANTIC :: DAY EDITION (default)
   --------------------------------------------------------------------------- */

:root,
[data-theme='day'] {
  color-scheme: light;

  --paper:       var(--c-stock-100);
  --paper-raise: var(--c-stock-50);
  --paper-tint:  var(--c-stock-200);
  --paper-tint2: var(--c-stock-300);

  --ink:         var(--c-ink-800);
  --ink-strong:  var(--c-ink-900);
  --ink-mid:     var(--c-ink-mid);
  --ink-faint:   var(--c-ink-400);

  --signal:      var(--c-signal);
  --signal-on:   #ffffff;              /* white on brand blue = 5.5:1 */
  --signal-tint: var(--c-signal-tint);

  /* The second halftone plate. Cyan over navy is the brand's own duotone. */
  --plate-2:     var(--c-cyan);

  --rule:        var(--rule-hair);
  --rule-2:      var(--rule-soft);
  --rule-strong: var(--rule-solid);

  /* The inverted ground: what a hover flood prints. Each edition and plate
     redefines the whole set, so text on an inversion never has to guess. */
  --invert-bg:          var(--c-ink-800);
  --invert-fg:          var(--c-stock-100);
  --invert-mid:         var(--c-ink-300);        /* 7.4:1 on navy */
  --invert-signal:      var(--c-signal-lite);    /* 6.4:1 on navy */
  --invert-rule:        rgb(248 249 255 / 0.22);
  --invert-rule-strong: rgb(248 249 255 / 0.72);

  --danger:  var(--c-red);
  --success: var(--c-green);

  --focus: var(--c-signal);

  --grain-opacity: 0.16;
  --grain-blend: multiply;
}

/* ---------------------------------------------------------------------------
   LAYER 2 — SEMANTIC :: NIGHT EDITION
   The same press run, stock and ink swapped.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='day']) {
    color-scheme: dark;

    --paper:       var(--c-ink-900);
    --paper-raise: var(--c-ink-800);
    --paper-tint:  var(--c-ink-700);
    --paper-tint2: var(--c-ink-600);

    --ink:         var(--c-stock-100);
    --ink-strong:  var(--c-stock-50);
    --ink-mid:     var(--c-ink-300);
    --ink-faint:   var(--c-ink-400);

    --signal:      var(--c-signal-lite);
    --signal-on:   var(--c-ink-900);
    --signal-tint: rgb(0 153 255 / 0.16);
    --plate-2:     var(--c-cyan);

    --rule:        rgb(248 249 255 / 0.20);
    --rule-2:      rgb(248 249 255 / 0.10);
    --rule-strong: rgb(248 249 255 / 0.72);

    --invert-bg:          var(--c-stock-100);
    --invert-fg:          var(--c-ink-900);
    --invert-mid:         var(--c-ink-mid);       /* 7.3:1 on stock */
    --invert-signal:      var(--c-signal);        /* 5.2:1 on stock */
    --invert-rule:        rgb(10 14 39 / 0.18);
    --invert-rule-strong: rgb(10 14 39 / 0.78);

    --danger:  #f87171;
    --success: #34d399;

    --grain-opacity: 0.12;
    --grain-blend: screen;
  }
}

[data-theme='night'] {
  color-scheme: dark;

  --paper:       var(--c-ink-900);
  --paper-raise: var(--c-ink-800);
  --paper-tint:  var(--c-ink-700);
  --paper-tint2: var(--c-ink-600);

  --ink:         var(--c-stock-100);
  --ink-strong:  var(--c-stock-50);
  --ink-mid:     var(--c-ink-300);
  --ink-faint:   var(--c-ink-400);

  --signal:      var(--c-signal-lite);
  --signal-on:   var(--c-ink-900);
  --signal-tint: rgb(0 153 255 / 0.16);
  --plate-2:     var(--c-cyan);

  --rule:        rgb(248 249 255 / 0.20);
  --rule-2:      rgb(248 249 255 / 0.10);
  --rule-strong: rgb(248 249 255 / 0.72);

  --invert-bg:          var(--c-stock-100);
  --invert-fg:          var(--c-ink-900);
  --invert-mid:         var(--c-ink-mid);
  --invert-signal:      var(--c-signal);
  --invert-rule:        rgb(10 14 39 / 0.18);
  --invert-rule-strong: rgb(10 14 39 / 0.78);

  --danger:  #f87171;
  --success: #34d399;

  --grain-opacity: 0.12;
  --grain-blend: screen;
}

/* A block printed solid navy in BOTH editions — the AI sections and the
   colophon. */
[data-plate='solid'] {
  --paper:       var(--c-ink-900);
  --paper-raise: var(--c-ink-800);
  --paper-tint:  var(--c-ink-700);
  --paper-tint2: var(--c-ink-600);
  --ink:         var(--c-stock-100);
  --ink-strong:  var(--c-stock-50);
  --ink-mid:     var(--c-ink-300);
  --ink-faint:   var(--c-ink-400);
  --signal:      var(--c-signal-lite);
  --signal-on:   var(--c-ink-900);
  --rule:        rgb(248 249 255 / 0.20);
  --rule-2:      rgb(248 249 255 / 0.10);
  --rule-strong: rgb(248 249 255 / 0.72);
  --invert-bg:          var(--c-stock-100);
  --invert-fg:          var(--c-ink-900);
  --invert-mid:         var(--c-ink-mid);
  --invert-signal:      var(--c-signal);
  --invert-rule:        rgb(10 14 39 / 0.18);
  --invert-rule-strong: rgb(10 14 39 / 0.78);
  --grain-blend: screen;

  background-color: var(--c-ink-900);
  color: var(--ink);
}

/* A block printed solid BRAND BLUE in both editions — the closing call to
   action. Cyan carries the accent here, since the signal itself is the
   ground. */
[data-plate='brand'] {
  --paper:       var(--c-signal);
  --paper-raise: var(--c-signal-deep);
  --paper-tint:  var(--c-signal-deep);
  --paper-tint2: var(--c-signal-deep);
  --ink:         #ffffff;
  --ink-strong:  #ffffff;
  --ink-mid:     rgb(255 255 255 / 0.80);
  --ink-faint:   rgb(255 255 255 / 0.58);
  --signal:      var(--c-cyan);
  --signal-on:   var(--c-ink-900);
  --rule:        rgb(255 255 255 / 0.28);
  --rule-2:      rgb(255 255 255 / 0.16);
  --rule-strong: rgb(255 255 255 / 0.85);
  --invert-bg:          #ffffff;
  --invert-fg:          var(--c-signal);
  --invert-mid:         var(--c-ink-mid);
  --invert-signal:      var(--c-signal-deep);
  --invert-rule:        rgb(10 14 39 / 0.18);
  --invert-rule-strong: rgb(10 14 39 / 0.78);
  --grain-blend: screen;

  background-color: var(--c-signal);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   LAYER 3 — COMPONENT TOKENS
   --------------------------------------------------------------------------- */

:root {
  --btn-height:    50px;
  --btn-height-sm: 38px;
  --btn-height-lg: 62px;
  --btn-pad-x:     var(--space-6);

  --cell-pad:  clamp(1.125rem, 0.8rem + 1.4vw, 2rem);
  --field-h:   50px;
}