/* ============================================================================
   Bottleneck Engine v2 — Design tokens (DESIGN-DIRECTION §2)
   Instrument-grade dark, warm-cool two-temperature.
   Color is a scalpel: 90% neutral, brass = money/human/action,
   cyan = system/AI, ember = the leak, green = the fix.
   ============================================================================ */

:root {
  /* ---- Surfaces (near-black warm-neutral, layered) ---- */
  --bg-base:        #0A0B0D;
  --bg-surface:     #101216;
  --bg-raised:      #16191E;
  --bg-overlay:     #1D2127;
  --bg-inset:       #0C0E11;

  /* ---- Hairlines & borders ---- */
  --border-subtle:  rgba(255,255,255,0.055);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);
  --border-focus:   rgba(212,162,76,0.55);

  /* ---- Text (never pure white) ---- */
  /* tertiary/faint bumped to clear WCAG AA (4.5:1) on --bg-base for real copy;
     faint stays the dimmest step but is reserved for decorative/label use. */
  --text-primary:   #F1F3F5;
  --text-secondary: #A6ADB8;
  --text-tertiary:  #868D97;
  --text-faint:     #6A717C;
  --text-on-brass:  #14100A;
  --focus-ring:     #E8C079;

  /* ---- Brass / gold: MONEY · HUMAN · PRIMARY ACTION ---- */
  --brass:          #D4A24C;
  --brass-bright:   #E8C079;
  --brass-dim:      #8A6D2E;
  --brass-wash:     rgba(212,162,76,0.10);
  --brass-line:     rgba(212,162,76,0.28);

  /* ---- Cyan: SYSTEM · AI · DIAGRAM ---- */
  --signal:         #56C7D6;
  --signal-bright:  #8FE0EB;
  --signal-dim:     #2E6B75;
  --signal-wash:    rgba(86,199,214,0.09);
  --signal-line:    rgba(86,199,214,0.26);

  /* ---- Semantic: the leak and the fix ---- */
  --leak:           #E06C5E;
  --leak-wash:      rgba(224,108,94,0.11);
  --leak-line:      rgba(224,108,94,0.30);
  --fixed:          #4FD08A;
  --fixed-wash:     rgba(79,208,138,0.10);
  --fixed-line:     rgba(79,208,138,0.28);

  /* ---- Spacing (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* ---- Radius ---- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* ---- Shadow / elevation ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:  0 6px 24px -6px rgba(0,0,0,0.55);
  --shadow-lg:  0 24px 64px -16px rgba(0,0,0,0.65);
  --edge-top:   inset 0 1px 0 rgba(255,255,255,0.06);
  --glow-brass: 0 0 0 1px var(--brass-line), 0 12px 40px -12px rgba(212,162,76,0.22);
  --glow-signal:0 0 0 1px var(--signal-line), 0 12px 40px -12px rgba(86,199,214,0.20);

  /* ---- Motion ---- */
  --d-instant:120ms; --d-fast:180ms; --d-base:260ms; --d-slow:440ms; --d-slower:720ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* ---- Type families ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* current-theme aliases (dark default; overridden by [data-theme=paper]) */
  --c-bg:    var(--bg-base);
  --c-panel: var(--bg-surface);
  --c-ink:   var(--text-primary);
  --c-muted: var(--text-secondary);
  --c-line:  var(--border-default);
}

/* ---- Light "paper" theme — the printable/forwardable artifact (§2.2) ---- */
[data-theme="paper"] {
  --paper:        #FBFAF7;
  --ink:          #17191C;
  --ink-muted:    #565E68;
  --line:         #E2DFD8;
  --wash:         #F3F1EC;
  --brass:        #9A7420;
  --brass-line:   rgba(154,116,32,0.30);
  --leak:         #B0402F;
  --leak-line:    rgba(176,64,47,0.30);
  --fixed:        #2C6E49;
  --fixed-line:   rgba(44,110,73,0.30);
  --signal:       #2E6B75;

  --bg-base:      var(--paper);
  --bg-surface:   #FFFFFF;
  --bg-raised:    #FFFFFF;
  --bg-inset:     var(--wash);
  --bg-overlay:   #FFFFFF;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-muted);
  --text-tertiary:  #7A828C;
  --text-faint:     #A7ADB4;
  --border-subtle:  rgba(23,25,28,0.06);
  --border-default: var(--line);
  --border-strong:  rgba(23,25,28,0.16);
  --edge-top:       none;
  --shadow-sm:      0 1px 2px rgba(23,25,28,0.06);
  --shadow-md:      0 6px 20px -8px rgba(23,25,28,0.12);
  --brass-wash:     rgba(154,116,32,0.08);
  --leak-wash:      rgba(176,64,47,0.07);
  --fixed-wash:     rgba(44,110,73,0.07);
  --signal-wash:    rgba(46,107,117,0.07);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant:0ms; --d-fast:0ms; --d-base:0ms; --d-slow:0ms; --d-slower:0ms;
  }
}