/* ───────────────────────────────────────────────────────────
   dieter / tokens.css · t-001 · v0.1
   design tokens — color, type, space, line, motion
   ─────────────────────────────────────────────────────────── */

:root {
  /* ── paper / ink — day ───────────────────────────────────── */
  --paper:    #f5f4f0;   /* dominant surface — warm off-white */
  --paper-2:  #ecebe5;   /* card / inset surface */
  --paper-3:  #e0ddd2;   /* hover / pressed surface */
  --ink:      #1a1a1a;   /* primary type, never #000 */
  --mid:      #6b6962;   /* secondary type */
  --dim:      #a09e96;   /* tertiary / disabled */
  --line:     #d6d2c4;   /* hairline divider */

  /* ── night palette — warm dark, photographic, never #000 ─── */
  --night:    #16140f;   /* deepest surface */
  --night-2:  #201d17;   /* raised */
  --night-3:  #2b2720;   /* hover / pressed */
  --milk:     #f0eee6;   /* primary type on night */
  --milk-mid: #8a8880;   /* secondary type on night */
  --milk-dim: #5e5b54;   /* tertiary on night */
  --line-n:   #322e25;   /* hairline on night */

  /* ── chromatic accents — one per device class ────────────── */
  --orange:   #ff6b1a;   /* pocket-operator orange — primary brand */
  --yellow:   #ffcc1f;   /* po yellow */
  --red:      #e62833;   /* op-1 red */
  --blue:     #2864e8;   /* field blue */
  --green:    #6abe4f;   /* ob-4 green / ok */
  --pink:     #ff7eb6;   /* accessory pink */

  /* ── semantic mapping — day default ──────────────────────── */
  --bg:           var(--paper);
  --bg-raised:    var(--paper-2);
  --bg-sunken:    var(--paper-3);
  --fg:           var(--ink);
  --fg-muted:     var(--mid);
  --fg-faint:     var(--dim);
  --border:       var(--line);
  --accent:       var(--orange);
  --ok:           var(--green);
  --warn:         var(--yellow);
  --danger:       var(--red);

  /* inverse surface — the "always opposite" pair.
     used by buttons, lcd, stat strip, dark icon chips.
     flips with theme to preserve inversion contrast. */
  --invert-bg:    var(--ink);
  --invert-fg:    var(--paper);

  color-scheme: light;
}

/* ── night theme — :root.theme-night ─────────────────────── */
:root.theme-night {
  --bg:           var(--night);
  --bg-raised:    var(--night-2);
  --bg-sunken:    var(--night-3);
  --fg:           var(--milk);
  --fg-muted:     var(--milk-mid);
  --fg-faint:     var(--milk-dim);
  --border:       var(--line-n);

  /* inverted surface flips: now the "opposite" is the light side */
  --invert-bg:    var(--milk);
  --invert-fg:    var(--night);

  color-scheme: dark;
}

/* ── non-themed tokens (type, space, motion, layout) ──────── */
:root {

  /* ── type families ───────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-jp:   'Noto Sans JP', var(--font-sans);

  /* ── type scale — restrained, two registers ──────────────── */
  --t-8:    8px;    /* micro caps */
  --t-9:    9px;    /* code / tag */
  --t-10:  10px;    /* meta / label */
  --t-11:  11px;    /* meta strong / eyebrow */
  --t-12:  12px;    /* secondary body */
  --t-13:  13px;    /* base body */
  --t-14:  14px;    /* card title */
  --t-15:  15px;    /* lead */
  --t-16:  16px;    /* sub-display */
  --t-18:  18px;    /* small heading */
  --t-22:  22px;    /* h3 */
  --t-24:  24px;    /* h2 small */
  --t-26:  26px;    /* h2 */
  --t-28:  28px;    /* h2 large */
  --t-36:  36px;    /* logotype */
  --t-42:  42px;    /* h1 small */
  --t-48:  48px;    /* h1 */
  --t-72:  72px;    /* hero min */
  --t-96:  96px;    /* hero max */

  /* tracking — tighter as size grows */
  --track-tight:  -0.045em;   /* hero */
  --track-snug:   -0.03em;    /* h2 */
  --track-near:   -0.02em;    /* h3 */
  --track-norm:   -0.005em;   /* body */
  --track-wide:    0.02em;    /* mono caps */
  --track-cap:     0.05em;    /* uppercase micro */

  /* weight */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-heavy:     800;
  --w-black:     900;

  /* ── space — 2px base, modular ───────────────────────────── */
  --s-2:    2px;
  --s-4:    4px;
  --s-6:    6px;
  --s-8:    8px;
  --s-10:  10px;
  --s-12:  12px;
  --s-14:  14px;
  --s-16:  16px;
  --s-18:  18px;
  --s-20:  20px;
  --s-22:  22px;
  --s-24:  24px;
  --s-28:  28px;
  --s-32:  32px;
  --s-40:  40px;
  --s-48:  48px;
  --s-60:  60px;
  --s-64:  64px;
  --s-80:  80px;

  /* ── line + radius — mostly square, mostly hairline ──────── */
  --line-w:    1px;
  --line-w-2:  2px;     /* tab active / emphasis */
  --r-0:    0;          /* default — square */
  --r-circle: 50%;      /* knob, dot, avatar only */
  --r-screen: 30px;     /* phone screen */
  --r-device: 38px;     /* phone body */

  /* ── elevation — almost none ─────────────────────────────── */
  --shadow-0: none;
  --shadow-device:
    0 12px 32px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 0 0 2px #2a2a2a;
  --glow-led: 0 0 6px rgba(106, 190, 79, 0.6);

  /* ── motion — short, functional, never decorative ────────── */
  --dur-snap:   90ms;
  --dur-quick: 150ms;
  --dur-base:  220ms;
  --ease:      cubic-bezier(0.2, 0, 0, 1);

  /* ── layout ──────────────────────────────────────────────── */
  --max-w:      1500px;
  --max-w-text: 700px;
  --gutter:     24px;

  /* ── breakpoints ─────────────────────────────────────────── */
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ── z-index scale ───────────────────────────────────────── */
  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   50;
  --z-overlay:  100;
  --z-popover:  500;
  --z-modal:    1000;
  --z-toast:    1100;

  /* ── aspect ratios ───────────────────────────────────────── */
  --ar-square: 1 / 1;
  --ar-card:   4 / 3;
  --ar-video: 16 / 9;
  --ar-portrait: 9 / 16;
  --ar-phone:  9 / 19.5;
}