/*
 * tokens.css — design tokens for the Kirchhoff Desk Suite shell.
 *
 * The visual language is deliberately controller-software: a fixed
 * navigation rail with color-coded sections, flat cards with hairline
 * borders instead of heavy shadows, a single confident accent blue for
 * primary actions, and status communicated with small color-coded pills
 * rather than color-coding whole rows. Light mode is a first-class second
 * pass, not an afterthought — every token below is redefined for it,
 * including the sidebar's own palette, never left to inherit.
 */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;

  --accent-h: 217;
  --accent: hsl(var(--accent-h) 91% 60%);
  --accent-strong: hsl(var(--accent-h) 91% 52%);
  --accent-soft: hsl(var(--accent-h) 91% 60% / 0.14);
  --accent-border: hsl(var(--accent-h) 91% 60% / 0.4);

  --success: #2fbf71;
  --success-soft: rgba(47, 191, 113, 0.14);
  --warning: #eab308;
  --warning-soft: rgba(234, 179, 8, 0.14);
  --danger: #f04b4b;
  --danger-soft: rgba(240, 75, 75, 0.14);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, 0.14);

  --transition-fast: 120ms ease;
  --transition-med: 200ms ease;
}

/* ---------------------------- Dark (default) --------------------------- */
:root,
:root[data-theme="dark"] {
  --bg-app: #0a0c10;
  --bg-sidebar: #0d1016;
  --bg-topbar: #0d1016;
  --bg-surface: #12151c;
  --bg-surface-raised: #171b24;
  --bg-surface-hover: #1b202b;
  --bg-inset: #0d0f14;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text-primary: #eef1f6;
  --text-secondary: #a6adba;
  --text-tertiary: #6b7280;
  --text-on-accent: #051225;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55);
  --scrollbar-thumb: rgba(255, 255, 255, 0.14);
  color-scheme: dark;

  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-text: #fff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.4);
  --sidebar-text-label: rgba(255, 255, 255, 0.32);
  --sidebar-text-item: rgba(255, 255, 255, 0.68);
  --sidebar-text-item-hover: #fff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-footer-hover-bg: rgba(255, 255, 255, 0.04);
  --sidebar-count-bg: rgba(255, 255, 255, 0.08);
  --sidebar-count-text: rgba(255, 255, 255, 0.5);
}

/* ------------------------------ Light ---------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-app: #f4f6f9;
    --bg-sidebar: #ffffff;
    --bg-topbar: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-raised: #ffffff;
    --bg-surface-hover: #f1f4f9;
    --bg-inset: #eef1f6;
    --border-subtle: rgba(15, 23, 42, 0.07);
    --border-default: rgba(15, 23, 42, 0.11);
    --border-strong: rgba(15, 23, 42, 0.18);
    --text-primary: #12151c;
    --text-secondary: #545b68;
    --text-tertiary: #8a91a0;
    --text-on-accent: #051225;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-pop: 0 16px 40px rgba(15, 23, 42, 0.18);
    --scrollbar-thumb: rgba(15, 23, 42, 0.16);
    color-scheme: light;

    --sidebar-border: rgba(15, 23, 42, 0.08);
    --sidebar-text: #12151c;
    --sidebar-text-muted: rgba(15, 23, 42, 0.42);
    --sidebar-text-label: rgba(15, 23, 42, 0.4);
    --sidebar-text-item: rgba(15, 23, 42, 0.62);
    --sidebar-text-item-hover: #12151c;
    --sidebar-hover-bg: rgba(15, 23, 42, 0.045);
    --sidebar-footer-hover-bg: rgba(15, 23, 42, 0.035);
    --sidebar-count-bg: rgba(15, 23, 42, 0.07);
    --sidebar-count-text: rgba(15, 23, 42, 0.5);
  }
}
:root[data-theme="light"] {
  --bg-app: #f4f6f9;
  --bg-sidebar: #ffffff;
  --bg-topbar: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-hover: #f1f4f9;
  --bg-inset: #eef1f6;
  --border-subtle: rgba(15, 23, 42, 0.07);
  --border-default: rgba(15, 23, 42, 0.11);
  --border-strong: rgba(15, 23, 42, 0.18);
  --text-primary: #12151c;
  --text-secondary: #545b68;
  --text-tertiary: #8a91a0;
  --text-on-accent: #051225;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 16px 40px rgba(15, 23, 42, 0.18);
  --scrollbar-thumb: rgba(15, 23, 42, 0.16);
  color-scheme: light;

  --sidebar-border: rgba(15, 23, 42, 0.08);
  --sidebar-text: #12151c;
  --sidebar-text-muted: rgba(15, 23, 42, 0.42);
  --sidebar-text-label: rgba(15, 23, 42, 0.4);
  --sidebar-text-item: rgba(15, 23, 42, 0.62);
  --sidebar-text-item-hover: #12151c;
  --sidebar-hover-bg: rgba(15, 23, 42, 0.045);
  --sidebar-footer-hover-bg: rgba(15, 23, 42, 0.035);
  --sidebar-count-bg: rgba(15, 23, 42, 0.07);
  --sidebar-count-text: rgba(15, 23, 42, 0.5);
}

/* The sidebar follows the theme like everything else — --bg-sidebar and the
   --sidebar-* text/border tokens above are redefined per theme, same as
   every other surface. What doesn't change is per-item icon color: each
   section's --nav-color (set inline in main.js, read in base.css) comes
   from the same palette in both themes, so the color-coded categories stay
   legible whichever theme is active. */