/* design-tokens.css — single source of truth for design primitives.
 *
 * Plain CSS custom properties (no build step). Imported by index.html
 * before Tailwind output and component styles, so every layer can
 * reference the same `var(--token)` names. Values match the Claude
 * Design bundle (project/styles.css) verbatim and align with the
 * existing @theme block in styles.src.css for token-name parity.
 *
 * Dark mode (Tokyo Night) is the default. Light mode activates under
 * :root[data-theme="light"] or :root.light. Per-accent and per-density
 * overrides mirror the bundle's `[data-accent]` / `[data-density]` hooks. */

:root {
  /* === Color palette: Tokyo Night (verbatim from bundle) === */
  --tn-bg:        #1a1b26;
  --tn-panel:     #16161e;
  --tn-card:      #24283b;
  --tn-card-hi:   #2a2f45;
  --tn-fg:        #a9b1d6;
  --tn-fg-hi:     #c0caf5;
  --tn-muted:     #787c99;
  --tn-muted-2:   #565f89;
  --tn-border:    rgba(120, 124, 153, 0.22);
  --tn-border-hi: rgba(120, 124, 153, 0.40);

  --tn-blue:    #7aa2f7;
  --tn-cyan:    #7dcfff;
  --tn-green:   #73daca;
  --tn-lime:    #9ece6a;
  --tn-yellow:  #e0af68;
  --tn-red:     #f7768e;
  --tn-purple:  #bb9af7;
  --tn-orange:  #ff9e64;

  /* === Color palette: light-mode swatches (preserved from styles.src.css) === */
  --tn-light-bg:    #e6e7ed;
  --tn-light-panel: #d6d8df;
  --tn-light-fg:    #363c4d;
  --tn-light-blue:  #2959aa;

  /* === Colors: semantic surfaces (dark default; overridden in light mode below) === */
  --bg:        var(--tn-bg);
  --panel:     var(--tn-panel);
  --panel-2:   #1f2030;
  --card:      var(--tn-card);
  --card-hi:   var(--tn-card-hi);
  --border:    var(--tn-border);
  --border-hi: var(--tn-border-hi);

  /* === Colors: semantic text === */
  --text:     var(--tn-fg);
  --text-hi:  var(--tn-fg-hi);
  --text-dim: var(--tn-muted);
  --muted:    var(--tn-muted);
  --muted-2:  var(--tn-muted-2);

  /* === Colors: accent (default blue; swap via [data-accent]) === */
  --accent:      var(--tn-blue);
  --accent-soft: rgba(122, 162, 247, 0.14);

  /* === Colors: status + role aliases === */
  --status-running: var(--tn-green);
  --status-waiting: var(--tn-yellow);
  --status-error:   var(--tn-red);
  --status-idle:    var(--tn-muted-2);
  /* Mirrors the TUI's SessionStatusStopped (ColorTextDim, styles.go) — the
     glyph an archived or deliberately-stopped row gets there. */
  --status-stopped: var(--tn-muted);
  --status-start:   var(--tn-purple);
  --phosphor:       var(--tn-green);
  --amber:          var(--tn-yellow);
  --red:            var(--tn-red);
  --purple:         var(--tn-purple);
  --blue:           var(--tn-blue);

  /* === Typography: families === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* === Typography: size scale (literal px steps observed in bundle) === */
  --fs-10:   10px;
  --fs-10-5: 10.5px;
  --fs-11:   11px;
  --fs-11-5: 11.5px;
  --fs-12:   12px;
  --fs-12-5: 12.5px;
  --fs-13:   13px;
  --fs-14:   14px;
  --fs-16:   16px;
  --fs-22:   22px;
  --fs-26:   26px;

  /* === Typography: weights === */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* === Typography: line-heights === */
  --lh-tight: 1;
  --lh-body:  1.45;
  --lh-loose: 1.55;

  /* === Spacing: 4-pt grid (with 2/6/10/14 micro-steps used by bundle) === */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  14px;
  --sp-8:  16px;
  --sp-10: 20px;
  --sp-11: 22px;
  --sp-14: 28px;
  --sp-16: 32px;
  --sp-20: 40px;

  /* === Radii: corner radius scale === */
  --radius-xs:     1px;
  --radius-sm:     3px;
  --radius:        6px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* === Shadows: elevation ramp + status glows + decorative === */
  --shadow-1:     0 20px 40px -10px rgba(0, 0, 0, 0.6);
  --shadow-2:     0 20px 50px -15px rgba(0, 0, 0, 0.6);
  --shadow-3:     0 20px 60px -20px rgba(0, 0, 0, 0.5);
  --shadow-4:     0 30px 60px -20px rgba(0, 0, 0, 0.5);
  --shadow-5:     0 40px 100px -20px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 40px 100px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-soft);
  --shadow-tab-underline: inset 0 -2px 0 0 var(--accent);
  --glow-running: 0 0 6px rgba(115, 218, 202, 0.7);
  --glow-waiting: 0 0 6px rgba(224, 175, 104, 0.7);
  --glow-error:   0 0 6px rgba(247, 118, 142, 0.7);

  /* === Motion: durations + easings === */
  --dur-fast:       120ms;
  --dur-base:       150ms;
  --dur-slow:       200ms;
  --dur-blink:      1s;
  --dur-pulse-fast: 1.2s;
  --dur-pulse:      2s;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    ease-in-out;
  --ease-step:      steps(1);

  /* === Elevation: z-index ladder (aligned with styles.src.css scale) === */
  --z-base:           0;
  --z-sticky:         10;
  --z-dropdown:       20;
  --z-topbar:         40;
  --z-topbar-primary: 45;
  --z-modal:          50;
  --z-fab:            55;
  --z-overlay:        60;
  --z-fab-menu:       70;
  --z-toast:          100;

  /* === Layout: app-shell dimensions (from bundle) === */
  --topbar-h:    44px;
  --footer-h:    26px;
  --sidebar-w:   300px;
  --rightrail-w: 340px;

  /* === Density: row height + gap (override via [data-density]) === */
  --density-row: 30px;
  --density-gap: 6px;
}

/* Density modifiers — mirror bundle's `body[data-density=…]` hooks. */
:root[data-density="compact"]     { --density-row: 26px; --density-gap: 4px; }
:root[data-density="comfortable"] { --density-row: 36px; --density-gap: 10px; }

/* Accent swap-outs — mirror bundle's `body[data-accent=…]` hooks. */
:root[data-accent="blue"]   { --accent: var(--tn-blue);   --accent-soft: rgba(122, 162, 247, 0.14); }
:root[data-accent="amber"]  { --accent: var(--tn-yellow); --accent-soft: rgba(224, 175, 104, 0.14); }
:root[data-accent="green"]  { --accent: var(--tn-green);  --accent-soft: rgba(115, 218, 202, 0.14); }
:root[data-accent="purple"] { --accent: var(--tn-purple); --accent-soft: rgba(187, 154, 247, 0.14); }

/* Light mode — activated by :root[data-theme="light"] or :root.light. Only
 * semantic surfaces/text/accent are rebound; brand palette stays available. */
:root[data-theme="light"],
:root.light {
  --bg:        var(--tn-light-bg);
  --panel:     var(--tn-light-panel);
  --panel-2:   #c8cad3;
  --card:      #ffffff;
  --card-hi:   #f0f1f5;
  --border:    rgba(54, 60, 77, 0.18);
  --border-hi: rgba(54, 60, 77, 0.32);

  --text:     var(--tn-light-fg);
  --text-hi:  #1c2030;
  --text-dim: #5a6177;
  --muted:    #5a6177;
  --muted-2:  #7d8497;

  --accent:      var(--tn-light-blue);
  --accent-soft: rgba(41, 89, 170, 0.12);
}