/* ─────────────────────────────────────────────────────────────────
   tokens.css — single source of truth for the design system
   Aesthetic: terminal-influenced control panel. Dark default,
   bracket-status pills, mono for identifiers, system fonts only.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* ─── Spacing (4px base) ─── */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 56px;
  --s-16: 80px;

  /* ─── Type scale ─── */
  --t-xs: 11px;
  --t-sm: 12px;
  --t-base: 13px;       /* dense UI body */
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 28px;
  --t-3xl: 40px;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  /* ─── Type families ─── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* ─── Radii ─── */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;

  /* ─── Layout ─── */
  --max-w: 1280px;
  --max-w-prose: 760px;
  --header-h: 52px;
  --z-base: 1;
  --z-sticky: 100;
  --z-toast: 200;

  /* ─── Dark theme (default) ─── */
  --bg:           #0e1116;     /* ink */
  --bg-surface:   #161b22;     /* card */
  --bg-elevated:  #1c2129;     /* hover / row highlight */
  --bg-input:     #0a0d12;     /* recessed input */
  --border:       #30363d;
  --border-strong:#444c56;

  --fg:           #e6edf3;     /* primary text */
  --fg-muted:     #7d8590;     /* secondary text */
  --fg-dim:       #484f58;     /* tertiary / disabled */

  --accent:       #5eead4;     /* teal-300 — brand */
  --accent-soft:  #2dd4bf;     /* teal-400 */
  --accent-dim:   rgba(94, 234, 212, 0.12);
  --accent-ring:  rgba(94, 234, 212, 0.35);

  --ok:           #3fb950;
  --ok-dim:       rgba(63, 185, 80, 0.15);
  --warn:         #d29922;
  --warn-dim:     rgba(210, 153, 34, 0.15);
  --danger:       #f85149;
  --danger-dim:    rgba(248, 81, 73, 0.15);
  --info:         #58a6ff;

  /* Status pills (the signature element) */
  --status-active:   var(--ok);
  --status-revoked:  var(--danger);
  --status-pending:  var(--warn);
  --status-info:     var(--info);

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 80ms;
  --dur: 150ms;
}

/* ─── Light theme (opt-in) ─── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:           #fafafa;
    --bg-surface:   #ffffff;
    --bg-elevated:  #f0f0f2;
    --bg-input:     #ffffff;
    --border:       #d4d4d8;
    --border-strong:#a1a1aa;

    --fg:           #0a0a0a;
    --fg-muted:     #52525b;
    --fg-dim:       #a1a1aa;

    --accent:       #0d9488;     /* teal-600 — readable on white */
    --accent-soft:  #14b8a6;
    --accent-dim:   rgba(13, 148, 136, 0.10);
    --accent-ring:  rgba(13, 148, 136, 0.30);
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}