/* ============================================
   Soft-Transport Design Tokens
   "Beauty at the branches, simplicity at the edges"
   ============================================ */

:root {

  /* Backbone */
  --color-backbone: #e4e3e1; /* [cc] 2026-07-11 r16 — LIGHT CHROME goes WARM (David: "navigation space should be a nice form of the page s yellow, not blueish... they feel disconnected") — one bone/cream family with the v2 paper */

  /* Canvas */
  --color-bg-primary: #dfdedc;
  --color-bg-secondary: #ecebe9;
  --color-bg-surface: #ecebe9;
  --color-bg-tertiary: #e4e3e1;
  --color-bg-hover: #d6d5d2;

  /* Text */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;

  /* Dot grid */
  --color-dot: rgba(0, 0, 0, 0.09);

  /* Borders [cc] 2026-06-26 — reverted to cool blue-gray */
  --color-border: #cbcac6;
  --color-border-subtle: #dbdad7;

  --color-accent: #428bca;
  --color-accent-hover: #3071a9;
  --color-accent-subtle: #eaf3fa;

  --color-easy-frame: rgba(92, 128, 166, 0.36);
  --color-easy-frame-strong: rgba(92, 128, 166, 0.62);
  --color-easy-glow: rgba(92, 128, 166, 0.13);

  /* Icon Rail / Menu — cool blue-gray bg, #333 ink, legacy-blue active [cc] 2026-06-26 reverted */
  --color-rail-bg: #e4e3e1;
  --color-rail-active: rgba(158, 132, 60, 0.14); /* [cc] r16 — GOLD active wash (David 07-11 flipped the 06-25 blue call: "not blueish") */
  --color-rail-hover: rgba(0, 0, 0, 0.05);
  --color-rail-text: #47463f; /* [cc] 2026-07-10 r13 — 35-vs-36 investigation: near-black labels read HARSH against the mono type; the mockup's calm comes partly from muted body-tone labels. Two steps softer, still ≥7:1 contrast on #e1e5ea. */
  --color-rail-text-active: #6f570f; /* [cc] r16 — deep gold-brown active (was legacy blue; David: not blueish) */
  --color-rail-border: rgba(0, 0, 0, 0.08);

  /* Status Dots */
  --color-status-active: #10b981;
  --color-status-loading: #3b82f6;
  --color-status-waiting: #f59e0b;
  --color-status-error: #ef4444;

  /* Panels [cc] 2026-06-26 reverted to cool */
  --color-panel-bg: #ecebe9;
  --color-panel-border: #cbcac6;
  --panel-shadow: 0 0 40px rgba(0, 0, 0, 0.08);

  /* Topbar — part of canvas, not backbone */
  --color-topbar-bg: transparent;
  --color-topbar-border: var(--color-border);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* === Dark Mode === */
.dark {
  /* Warm amber-brown palette (Claude.ai inspired — from dark-mode-v2 branch) */

  /* Backbone (rail + topbar — darkest layer) */
  --color-backbone: #101113; /* [cc] 2026-07-11 r19 — dark shell UNIFIED with the v2 Linear page (David: "make one style out of these things") — warm charcoal era ends here */

  /* Canvas — slightly lighter than backbone */
  --color-bg-primary: #17181b; /* = the v2 paper — drawer frame and page are ONE plane now */
  --color-bg-secondary: #26282d;
  --color-bg-surface: #26282d;
  --color-bg-hover: #2e3036;

  --color-text-primary: #cfd1d4; /* [cc] r19 — "white text should be a bit more gray, contrast not that big" (David) — cool grey, ~10:1 on #17181b */
  --color-text-secondary: #8d9297;
  --color-text-tertiary: #6d7178;

  /* Dot grid */
  --color-dot: rgba(255, 255, 255, 0.08);

  /* Borders — warm */
  --color-border: #33353a;
  --color-border-subtle: #26282d;

  /* Accents — warm-compatible */
  --color-accent: #5e6ad2; /* [cc] r19 — Linear indigo, one accent language with the page */
  --color-accent-hover: #7d87dc;
  --color-accent-subtle: rgba(94, 106, 210, 0.12);

  /* [cc] 2026-06-16 — Easy ask-bar frame (dark): soft cyan, chill on the warm dark field. */
  --color-easy-frame: rgba(120, 185, 215, 0.30);
  --color-easy-frame-strong: rgba(120, 185, 215, 0.55);
  --color-easy-glow: rgba(120, 185, 215, 0.12);

  /* Rail — matches backbone (darkest) */
  --color-rail-bg: #101113;
  --color-rail-text: #8d9297;
  --color-rail-text-active: #cfd1d4;
  --color-rail-active: rgba(94, 106, 210, 0.16);
  --color-rail-hover: rgba(255, 255, 255, 0.05);
  --color-rail-border: rgba(255, 255, 255, 0.04);

  /* Panels */
  --color-panel-bg: #26282d;
  --color-panel-border: #33353a;
  --panel-shadow: 0 0 40px rgba(0, 0, 0, 0.5);

  /* Topbar — transparent, sits on backbone */
  --color-topbar-bg: transparent;
  --color-topbar-border: #33353a;
}

/* === Base Resets === */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Scrollbar styling (subtle) === */
/* [cc] 2026-06-11 — Firefox equivalents (cross-engine rule); inherits to all scrollables */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* [cc] 2026-06-12 — native widgets follow the theme (checklist checkboxes etc.) */
:root { color-scheme: light; }
.dark { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); }

:root { --elev-1: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.07); --elev-2: 0 2px 6px rgba(0,0,0,0.08), 0 10px 28px rgba(0,0,0,0.10); }
.dark  { --elev-1: 0 1px 2px rgba(0,0,0,0.40), 0 3px 10px rgba(0,0,0,0.32); --elev-2: 0 4px 14px rgba(0,0,0,0.50), 0 14px 36px rgba(0,0,0,0.42); }

/* [cc] 2026-06-15 — deeper elevation (David: "borders dont feel deep, needs to feel alive") */
:root { --elev-1: 0 1px 2px rgba(0,0,0,0.06), 0 3px 8px rgba(0,0,0,0.08); --elev-2: 0 4px 10px rgba(0,0,0,0.10), 0 14px 32px rgba(0,0,0,0.12); --elev-3: 0 8px 24px rgba(0,0,0,0.12), 0 24px 60px rgba(0,0,0,0.14); }
.dark  { --elev-1: 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.38); --elev-2: 0 6px 18px rgba(0,0,0,0.55), 0 18px 44px rgba(0,0,0,0.48); --elev-3: 0 10px 30px rgba(0,0,0,0.6), 0 30px 70px rgba(0,0,0,0.5); }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* both layers occupy the same box and cross-fade (default), giving a clean dissolve */
::view-transition-old(root) { animation-name: st-theme-fade-out; }
::view-transition-new(root) { animation-name: st-theme-fade-in; }
@keyframes st-theme-fade-out { to { opacity: 0; } }
@keyframes st-theme-fade-in  { from { opacity: 0; } }