:root {
  color-scheme: dark light;

  --c-bg-0: #0a0c10;
  --c-bg-1: #11141b;
  --c-bg-2: #181c25;
  --c-bg-3: #222836;
  --c-bg-elev: #1d2230;
  --c-border: #2a3142;
  --c-border-strong: #3a4358;

  --c-text-0: #f3f5f9;
  --c-text-1: #c8cfdc;
  --c-text-2: #8a93a6;
  --c-text-3: #5b6376;

  --c-accent: #5b8cff;
  --c-accent-hover: #7aa1ff;
  --c-accent-soft: rgba(91, 140, 255, 0.12);
  --c-success: #34d399;
  --c-warning: #f5b95b;
  --c-danger: #f87171;
  --c-info: #60a5fa;

  --c-band-excellent: #34d399;
  --c-band-proficient: #5b8cff;
  --c-band-developing: #f5b95b;
  --c-band-needs-work: #f87171;

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

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(91, 140, 255, 0.4);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="light"] {
  --c-bg-0: #f5f7fb;
  --c-bg-1: #ffffff;
  --c-bg-2: #f0f3f9;
  --c-bg-3: #e3e8f1;
  --c-bg-elev: #ffffff;
  --c-border: #d8deea;
  --c-border-strong: #b9c2d4;

  --c-text-0: #0c1320;
  --c-text-1: #2a3344;
  --c-text-2: #5b6376;
  --c-text-3: #8a93a6;

  --c-accent-soft: rgba(91, 140, 255, 0.14);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}