/* ============================================================
   tokens.css — the whole design system in one place
   Palette: cool machined grey. Precision cyan is the accent;
   safety amber is reserved for live/now indicators only.
   ============================================================ */

:root {
  /* ── type families ─────────────────────────────────────── */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-prose: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── type scale (fluid, 390px → 1440px) ────────────────── */
  --step--2: clamp(0.69rem, 0.67rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.17vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.17rem);
  --step-1:  clamp(1.2rem, 1.11rem + 0.38vw, 1.46rem);
  --step-2:  clamp(1.44rem, 1.3rem + 0.6vw, 1.83rem);
  --step-3:  clamp(1.73rem, 1.51rem + 0.91vw, 2.29rem);
  --step-4:  clamp(2.07rem, 1.75rem + 1.34vw, 2.86rem);
  --step-5:  clamp(2.49rem, 2.02rem + 1.94vw, 3.58rem);
  --step-6:  clamp(2.99rem, 2.32rem + 2.76vw, 4.47rem);
  --step-7:  clamp(3.58rem, 2.63rem + 3.9vw, 5.59rem);

  /* ── spacing ───────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: clamp(5rem, 3.5rem + 7vw, 9rem);

  /* ── layout ────────────────────────────────────────────── */
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.5rem);
  --measure: 38rem;          /* prose line length ~70ch      */
  --col-flow: 52rem;         /* content column               */
  --col-scale: 15.5rem;      /* sticky reading scale         */
  --shell-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  --masthead-h: 4.25rem;

  /* ── motion ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;

  --radius: 2px;             /* machined, not rounded        */
  --hair: 1px;
}

/* ── light: engineering paper ───────────────────────────── */
:root,
[data-theme='light'] {
  --graphite:   #151a21;
  --vellum:     #e7eaec;
  --bone:       #f4f6f7;
  --signal:     #0d8b97;
  --signal-lift:#0fa3b1;
  --live:       #d8542a;

  --bg:         var(--vellum);
  --bg-raised:  var(--bone);
  --bg-sunk:    #dde1e4;
  --ink:        var(--graphite);
  --ink-soft:   #4c5761;
  --ink-faint:  #7d8891;
  --rule:       #c8ced3;
  --rule-soft:  #d6dbdf;

  --portrait-blend: multiply;
  --portrait-shade: 0.42;
  --grid-alpha: 0.07;
  color-scheme: light;
}

/* ── dark: instrument panel at night ────────────────────── */
[data-theme='dark'] {
  --graphite:   #0b0e13;
  --vellum:     #dfe4e8;

  --bg:         #0c1014;
  --bg-raised:  #12181e;
  --bg-sunk:    #080b0e;
  --ink:        #e4e9ec;
  --ink-soft:   #97a3ad;
  --ink-faint:  #67737d;
  --rule:       #252e36;
  --rule-soft:  #1b232a;

  --signal:     #2ec4d2;
  --signal-lift:#54dbe8;
  --live:       #ff7a4d;

  --portrait-blend: screen;
  --portrait-shade: 0.3;
  --grid-alpha: 0.1;
  color-scheme: dark;
}