/* ============================================================
   tokens.css — CI-tool design tokens
   Dark default (:root). Light via [data-theme="light"].
   Source: design_handoff_ci_tool_redesign README (canonical colors)
           + CI-tool-Redesign-Spec.md §2 (spacing/radius/motion/safe-area)
   PR1 — redesign migration, foundation layer.
   ============================================================ */

:root {
  /* ---- SURFACE (near-black, cool-neutral, never pure #000) ---- */
  --bg:            #0B0C0E;   /* app background */
  --surface-1:     #111316;   /* cards, sidebar */
  --surface-2:     #171A1E;   /* raised: drawer, modal */
  --surface-3:     #1E2228;   /* input fields, hover fill */
  --hairline:      #262B31;   /* 1px borders */
  --hairline-soft: #1B1F24;   /* inner dividers */

  /* ---- TEXT ---- */
  --text-1:        #E9ECEF;   /* primary text */
  --text-2:        #A5ADB6;   /* secondary text */
  --text-3:        #8b939c;   /* tertiary / meta */
  --text-inverse:  #0B0C0E;

  /* ---- ACCENT ---- */
  --accent:        #3EE87C;   /* primary actions, active nav, focus, high-signal */
  --accent-press:  #2FD46C;   /* pressed */
  --accent-weak:   #12351F;   /* tinted fill behind accent text */
  --on-accent:     #05130B;   /* text on accent fill */

  /* ---- SIGNAL TIERS (desaturated, NOT traffic-light) ---- */
  --sig-neutral:      #8b939c;  /* ignore verdict / ambient */
  --sig-interest:     #D2A24E;  /* monitor verdict */
  --sig-high:         #F2A93B;  /* investigate verdict */
  --sig-neutral-bg:   #1b1f24;
  --sig-interest-bg:  #2A2113;
  --sig-high-bg:      #352610;
  --sig-high-bg-faint: rgba(62, 232, 124, 0.05); /* synthesized/AI block tint */

  /* ---- STATE ---- */
  --danger:        #D98A7A;   /* source failure, destructive */
  --danger-bg:     #2A1815;
  --warn:          #C9A96A;   /* stale source, sonnet cost bars */

  /* ---- TYPE ---- */
  /* OS system font stack only — no Inter, no Newsreader, no Google Fonts. */
  --font-ui:    system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: Georgia, serif;      /* reading/editorial fallback, no web font */
  --font-read:  Georgia, serif;      /* alias used by newer component css (§2 naming) */

  /* modular scale, 1.20 (minor third), 16px base */
  --t-xs:   0.75rem;   /* 12 — mono meta, labels */
  --t-sm:   0.8125rem; /* 13 — dense UI text */
  --t-base: 0.9375rem; /* 15 — body UI */
  --t-md:   1.0625rem; /* 17 — card titles */
  --t-lg:   1.375rem;  /* 22 — section heads */
  --t-xl:   1.75rem;   /* 28 — screen titles */
  --t-2xl:  2.25rem;   /* 36 — briefing headline */
  --t-read: 1.125rem;  /* 18 — reading body, 1.6 leading */

  --lh-tight: 1.25;
  --lh-body:  1.5;
  --lh-read:  1.65;

  /* ---- SPACING (4px base) ---- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;

  /* ---- RADIUS ---- */
  --r-sm: 6px;    /* chips, badges */
  --r-md: 10px;   /* cards, inputs */
  --r-lg: 14px;   /* drawer, modal */
  --r-full: 999px;

  /* ---- SHADOW (restrained; dark UI leans on hairlines not shadow) ---- */
  --shadow-drawer: 0 8px 40px -8px rgba(0, 0, 0, 0.6);
  --shadow-modal:  0 20px 60px -12px rgba(0, 0, 0, 0.7);
  --shadow-pop:    0 4px 20px -4px rgba(0, 0, 0, 0.5);

  /* ---- MOTION (<200ms, no springs) ---- */
  --dur-1: 120ms;  /* micro: press, chip toggle */
  --dur-2: 160ms;  /* standard: drawer, fade */
  --dur-3: 200ms;  /* max: mode transition */
  --ease:       cubic-bezier(0.2, 0, 0, 1);   /* decelerate — precise */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- TOUCH ---- */
  --tap: 44px;      /* minimum interactive target */

  /* ---- SAFE AREA (iOS) ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ---- CHROME DIMENSIONS (see chrome.css) ---- */
  --chrome-sidebar-w: 244px;
  --chrome-rail-w:    72px;
  --chrome-tabbar-h:  49px;
}

/* ---------------- LIGHT MODE ---------------- */
[data-theme="light"] {
  --bg:            #FBFBFA;
  --surface-1:     #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-3:     #F1F2F1;
  --hairline:      #E4E6E4;
  --hairline-soft: #EEF0EE;

  --text-1:        #16181A;
  --text-2:        #4C545B;
  --text-3:        #767E85;
  --text-inverse:  #FFFFFF;

  --accent:        #12A651;   /* darkened for AA contrast on light surfaces */
  --accent-press:  #0E8E45;
  --accent-weak:   #E2F7EA;
  --on-accent:     #FFFFFF;

  --sig-neutral:      #6B747C;
  --sig-interest:     #9A6E12;
  --sig-high:         #B7690C;
  --sig-neutral-bg:   #F1F2F1;
  --sig-interest-bg:  #FBF1DC;
  --sig-high-bg:      #FCEBD2;
  --sig-high-bg-faint: rgba(18, 166, 81, 0.05);

  --danger:        #C0503C;
  --danger-bg:     #FBEAE6;
  --warn:          #A97B2E;

  --shadow-drawer: 0 8px 40px -8px rgba(16, 18, 20, 0.14);
  --shadow-modal:  0 20px 60px -12px rgba(16, 18, 20, 0.18);
  --shadow-pop:    0 4px 20px -4px rgba(16, 18, 20, 0.12);
}

/* ============================================================
   LEGACY COMPATIBILITY ALIASES
   ------------------------------------------------------------
   Pre-redesign CSS (static/style.css, ~30 templates) references
   an older token vocabulary (--surface, --border, --hi/--mid/--lo,
   --radius*, --shadow-sm, --sidebar-w, ...). Restyling those
   consumers is PR3 (component library extraction) — out of PR1
   scope. These aliases keep every existing screen rendering
   correctly against the new token values without touching
   style.css yet. Single indirection via var() re-resolves per
   theme automatically — no separate light-mode block needed.
   Remove this block once PR3 migrates style.css onto the new names.
   ============================================================ */
:root {
  --bg-elev:    var(--surface-1);
  --surface:    var(--surface-1);
  --surface-2:  var(--surface-2);
  --border:     var(--hairline);
  --border-2:   var(--hairline);
  --text:       var(--text-1);
  --accent-ink: var(--on-accent);
  --accent-dim: var(--accent-weak);

  --hi:      var(--sig-high);
  --hi-dim:  var(--sig-high-bg);
  --mid:     var(--sig-interest);
  --mid-dim: var(--sig-interest-bg);
  --lo:      var(--sig-neutral);
  --lo-dim:  var(--sig-neutral-bg);
  --int:     var(--sig-interest);
  --int-dim: var(--sig-interest-bg);

  --ai-tint:   var(--sig-high-bg-faint);
  --ai-border: var(--hairline);

  --shadow-sm: var(--shadow-pop);
  --shadow:    var(--shadow-pop);
  --shadow-lg: var(--shadow-modal);

  --radius-sm:   var(--r-sm);
  --radius:      var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-pill: var(--r-full);

  --sidebar-w: var(--chrome-sidebar-w);
  --header-h:  64px;

  --kbd-bg:  var(--surface-3);
  --code-bg: var(--surface-3);
  --code-fg: var(--text-1);
}

/* ---------------- MOTION SAFETY ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Base resets + utility classes
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-dim); }

.mono  { font-family: var(--font-mono);  font-feature-settings: "tnum"; }
.serif { font-family: var(--font-serif); }

/* ─── Scrollbar ──────────────────────────────────────── */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 20px;
  border: 3.5px solid transparent;
  background-clip: padding-box;
}

/* ═══════════════════════════════════════════════════════
   Keyframe animations
   ═══════════════════════════════════════════════════════ */
@keyframes nx-fade    { from { opacity: 0; transform: translateY(6px)  } to { opacity: 1; transform: none } }
@keyframes nx-toast   { from { opacity: 0; transform: translateY(14px) scale(.97)  } to { opacity: 1; transform: none } }
@keyframes nx-modal   { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes nx-expand  { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes nx-reason  { from { opacity: 0; transform: translateX(-6px) } to { opacity: 1; transform: none } }
@keyframes nx-bar     { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes nx-pulse   { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes nx-shimmer { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes nx-spin    { to { transform: rotate(360deg) } }