/* ─────────────────────────────────────────────────────────────
 * tokens.css — Tokextract design system tokens.
 * Lifted from Vestige's scaffold; palette swapped to the
 * Tokextract spectrum (cyan → teal → periwinkle → purple → magenta).
 * Single source of truth for color, type, space, radius, motion.
 * ───────────────────────────────────────────────────────────── */
:root {
  /* ── Palette ─────────────────────────────────────────────── */
  /* Tokextract palette: 172121-444554-9e6240-c5d9e2-f2ff49
   * ink → slate → terracotta → pale blue-gray → yellow-lime */
  --tx-ink:       #172121;  /* deepest — body text, Mark bg, dark blocks */
  --tx-slate:     #444554;  /* mid neutral — muted/info */
  --tx-terracotta:#9e6240;  /* warm accent — links, CTAs, primary chrome */
  --tx-mist:      #c5d9e2;  /* pale blue-gray — page background */
  --tx-lime:      #f2ff49;  /* bright pop — Mark logo decorative + warn */

  /* Surface */
  --vt-bg:        var(--tx-mist);
  --vt-panel:     #b5c9d2;  /* mist shifted ~6% darker — cards inset slightly */

  /* Ink */
  --vt-ink:       var(--tx-ink);
  --vt-ink-soft:  #2a3535;
  --vt-muted:     #17212199;
  --vt-faint:     #17212155;
  --vt-rule:      #17212122;
  --vt-rule-hi:   #17212144;

  /* Accent */
  --vt-accent:    var(--tx-terracotta);
  --vt-mint:      var(--tx-lime);
  --vt-accent-bg: #9e62401f;  /* terracotta @ ~12% */
  --vt-mint-bg:   #f2ff4933;  /* lime @ ~20% */

  /* Inverse surface (footer, dark blocks) */
  --vt-ink-fg:    var(--tx-mist);
  --vt-ink-mute:  #8a9498;

  /* Status colors mapped from palette */
  --vt-pos:       var(--tx-terracotta);
  --vt-warn:      var(--tx-lime);
  --vt-info:      var(--tx-slate);

  /* ── Type ────────────────────────────────────────────────── */
  --vt-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vt-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --vt-fs-9:   9px;
  --vt-fs-10:  10.5px;
  --vt-fs-11:  11px;
  --vt-fs-12:  12px;
  --vt-fs-13:  13px;
  --vt-fs-14:  14.5px;
  --vt-fs-16:  16px;
  --vt-fs-22:  22px;
  --vt-fs-32:  32px;
  --vt-fs-64:  64px;

  --vt-lh-tight: 1.15;
  --vt-lh-body:  1.6;
  --vt-lh-mono:  1.7;

  --vt-tr-tight:   -0.04em;
  --vt-tr-display: -0.025em;
  --vt-tr-mono:    0.04em;

  /* ── Space (4px grid) ────────────────────────────────────── */
  --vt-s-1:   4px;
  --vt-s-2:   8px;
  --vt-s-3:   12px;
  --vt-s-4:   16px;
  --vt-s-5:   20px;
  --vt-s-6:   24px;
  --vt-s-8:   32px;
  --vt-s-10:  40px;
  --vt-s-12:  48px;
  --vt-s-16:  64px;
  --vt-s-24:  96px;

  /* ── Radius ──────────────────────────────────────────────── */
  --vt-r-0:   0;
  --vt-r-1:   3px;
  --vt-r-pill: 999px;

  /* ── Borders ─────────────────────────────────────────────── */
  --vt-border-hard: 1px solid var(--vt-ink);
  --vt-border-soft: 1px solid var(--vt-rule);

  /* ── Motion ──────────────────────────────────────────────── */
  --vt-ease:        cubic-bezier(.2,.7,.3,1);
  --vt-dur-fast:    .15s;
  --vt-dur-mid:     .25s;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes vstg-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vstg-blink { 50% { opacity: 0; } }