/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Cool Neutral + Purposeful Color
   Principle: Color = Meaning. No decorative color.
═══════════════════════════════════════════════ */
:root {
  /* Canvas */
  --canvas: #f8f9fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border-subtle: #f0f1f3;
  --border: #e2e4e9;
  --border-strong: #cdd1d9;

  /* Text — 4 levels only */
  --text-primary: #1a1d23;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;
  --text-disabled: #d1d5db;

  /* Semantic — reserved for meaning */
  --critical: #e5484d;
  --critical-subtle: #fff0f0;
  --critical-border: #fecdd3;
  --warning: #e5a000;
  --warning-subtle: #fffbe5;
  --warning-border: #fde68a;
  --success: #30a46c;
  --success-subtle: #e9f9ee;
  --success-border: #86efac;
  --info: #3b82f6;
  --info-subtle: #eff6ff;
  --info-border: #bfdbfe;

  /* Sidebar */
  --sidebar-bg: #111318;
  --sidebar-hover: #1c1f26;
  --sidebar-active: #252830;
  --sidebar-border: #2a2d35;
  --sidebar-text: #8b8f9a;
  --sidebar-text-active: #f1f2f4;
  --sidebar-accent: #3b82f6;
  --sidebar-w: 220px;

  /* Topbar */
  --topbar-h: 52px;

  /* Spacing & Shape */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);

  /* Typography scale — 4 sizes */
  --font-label: 11px;
  --font-body: 13px;
  --font-heading: 15px;
  --font-hero: 22px;
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--canvas);
  color: var(--text-primary);
  font-size: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; border: none; background: none; font: inherit; }
a { text-decoration: none; color: inherit; }

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }


/* ═══════════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════════ */
[data-theme="dark"] {
  --canvas: #0f1117;
  --surface: #1a1d24;
  --surface-raised: #22252d;
  --border-subtle: #2a2d35;
  --border: #343840;
  --border-strong: #4a4f58;

  --text-primary: #f1f2f4;
  --text-secondary: #a0a5b0;
  --text-tertiary: #6b7080;
  --text-disabled: #454950;

  --critical: #f87171;
  --critical-subtle: rgba(248,113,113,.12);
  --critical-border: rgba(248,113,113,.25);
  --warning: #fbbf24;
  --warning-subtle: rgba(251,191,36,.1);
  --warning-border: rgba(251,191,36,.25);
  --success: #4ade80;
  --success-subtle: rgba(74,222,128,.1);
  --success-border: rgba(74,222,128,.25);
  --info: #60a5fa;
  --info-subtle: rgba(96,165,250,.1);
  --info-border: rgba(96,165,250,.25);

  --sidebar-bg: #0a0c10;
  --sidebar-hover: #151820;
  --sidebar-active: #1c2028;
  --sidebar-border: #1e2230;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
}

[data-theme="dark"] body {
  background: var(--canvas);
  color: var(--text-primary);
}

/* ─── Theme Toggle Button ─── */
.theme-toggle {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
  color: var(--text-tertiary);
}
.theme-toggle:hover {
  border-color: var(--info);
  color: var(--info);
  background: var(--canvas);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }