:root {
  --gray-0: #ffffff;
  --gray-1: #f7f8fa;
  --gray-2: #eef0f3;
  --gray-3: #e5e7eb;
  --gray-4: #d1d5db;
  --gray-5: #9ca3af;
  --gray-6: #6b7280;
  --gray-7: #4b5563;
  --gray-8: #374151;
  --gray-9: #1f2937;
  --gray-10: #111827;

  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #2563eb;
  --blue-600: #1d4fd8;
  --blue-700: #1e40af;

  --green-50: #f0fdf4;
  --green-500: #16a34a;
  --green-600: #15803d;
  --amber-50: #fffbeb;
  --amber-500: #d97706;
  --amber-600: #b45309;
  --red-50: #fef2f2;
  --red-500: #dc2626;
  --red-600: #b91c1c;

  --bg: var(--gray-0);
  --bg-subtle: var(--gray-1);
  --surface: var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-sunken: var(--gray-1);
  --surface-hover: var(--gray-2);

  --text: var(--gray-9);
  --text-muted: var(--gray-6);
  --text-subtle: var(--gray-5);
  --text-on-accent: #ffffff;

  --border-color: var(--gray-3);
  --border-strong-color: var(--gray-4);
  --border-subtle-color: var(--gray-2);
  --border: 1px solid var(--border-color);
  --border-strong: 1px solid var(--border-strong-color);
  --border-subtle: 1px solid var(--border-subtle-color);

  /* legacy v1 aliases (keep v1 CSS files compatible inside v2 pages) */
  --text-primary: var(--gray-9);
  --text-secondary: var(--gray-6);
  --brand: var(--accent);
  --brand-2: #7c3aed;
  --surface-1: var(--surface);
  --surface-2: var(--surface-raised);
  --surface-3: var(--surface-sunken);
  --bg: var(--gray-0);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --space-1: var(--s-1);
  --space-2: var(--s-2);
  --space-3: var(--s-3);
  --space-4: var(--s-4);
  --space-5: var(--s-5);
  --space-6: var(--s-6);
  --space-7: var(--s-7);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
  --shadow-lg: var(--sh-3);
  --font-family: var(--font-sans);

  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-soft: var(--blue-50);
  --accent-border: var(--blue-200);

  --success: var(--green-500);
  --success-soft: var(--green-50);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-50);
  --danger: var(--red-500);
  --danger-hover: var(--red-600);
  --danger-soft: var(--red-50);

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);
  --scrim: rgba(17, 24, 39, 0.5);

  --font-sans: "Pretendard Variable", "Pretendard", Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Courier New", monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-32: 32px;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(17, 24, 39, 0.06);
  --sh-2: 0 4px 12px rgba(17, 24, 39, 0.08);
  --sh-3: 0 12px 32px rgba(17, 24, 39, 0.12);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 48px;
  --content-max: 1440px;

  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-palette: 4000;

  /* Chart palette — categorical slots validated for CVD separation and
     contrast against the light surface (see charts.js). Fixed order; never
     cycle or generate extra hues. */
  --chart-1: #2a78d6;
  --chart-2: #1baf7a;
  --chart-3: #eda100;
  --chart-4: #008300;
  --chart-5: #4a3aa7;
  --chart-6: #e34948;
  --chart-7: #e87ba4;
  --chart-8: #eb6834;
  --chart-grid: var(--gray-2);
  --chart-axis: var(--gray-4);
  --chart-muted: var(--gray-4);
}

[data-theme="dark"] {
  --bg: #0f1216;
  --bg-subtle: #0b0e12;
  --surface: #151922;
  --surface-raised: #1c2230;
  --surface-sunken: #0f1319;
  --surface-hover: #1e2532;

  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --text-subtle: #6b7280;
  --text-on-accent: #0f1216;

  --border-color: #242b39;
  --border-strong-color: #2f3847;
  --border-subtle-color: #1a2030;
  --border: 1px solid var(--border-color);
  --border-strong: 1px solid var(--border-strong-color);
  --border-subtle: 1px solid var(--border-subtle-color);

  --accent: #60a5fa;
  --accent-hover: #3b82f6;
  --accent-soft: #18243c;
  --accent-border: #2a4163;

  --success: #4ade80;
  --success-soft: #0f2a1a;
  --warning: #fbbf24;
  --warning-soft: #2a1f0a;
  --danger: #f87171;
  --danger-hover: #ef4444;
  --danger-soft: #2a1414;

  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.35);
  --scrim: rgba(0, 0, 0, 0.65);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.5);
  --sh-3: 0 12px 32px rgba(0, 0, 0, 0.6);

  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --brand: #60a5fa;
  --surface-1: #151922;
  --surface-2: #1c2230;
  --surface-3: #0f1319;

  --chart-1: #3987e5;
  --chart-2: #199e70;
  --chart-3: #c98500;
  --chart-4: #008300;
  --chart-5: #9085e9;
  --chart-6: #e66767;
  --chart-7: #d55181;
  --chart-8: #d95926;
  --chart-grid: #1e2532;
  --chart-axis: #2f3847;
  --chart-muted: #374151;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1216;
    --bg-subtle: #0b0e12;
    --surface: #151922;
    --surface-raised: #1c2230;
    --surface-sunken: #0f1319;
    --surface-hover: #1e2532;
    --text: #e5e7eb;
    --text-muted: #9ca3af;
    --text-subtle: #6b7280;
    --text-on-accent: #0f1216;
    --border-color: #242b39;
    --border-strong-color: #2f3847;
    --border-subtle-color: #1a2030;
    --border: 1px solid var(--border-color);
    --border-strong: 1px solid var(--border-strong-color);
    --border-subtle: 1px solid var(--border-subtle-color);
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --brand: #60a5fa;
    --surface-1: #151922;
    --surface-2: #1c2230;
    --surface-3: #0f1319;
    --accent: #60a5fa;
    --accent-hover: #3b82f6;
    --accent-soft: #18243c;
    --accent-border: #2a4163;
    --success: #4ade80;
    --success-soft: #0f2a1a;
    --warning: #fbbf24;
    --warning-soft: #2a1f0a;
    --danger: #f87171;
    --danger-hover: #ef4444;
    --danger-soft: #2a1414;
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.35);
    --scrim: rgba(0, 0, 0, 0.65);
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 4px 14px rgba(0, 0, 0, 0.5);
    --sh-3: 0 12px 32px rgba(0, 0, 0, 0.6);
    --chart-1: #3987e5;
    --chart-2: #199e70;
    --chart-3: #c98500;
    --chart-4: #008300;
    --chart-5: #9085e9;
    --chart-6: #e66767;
    --chart-7: #d55181;
    --chart-8: #d95926;
    --chart-grid: #1e2532;
    --chart-axis: #2f3847;
    --chart-muted: #374151;
  }
}