:root {
  color-scheme: dark light;

  --bg: #0a0a0b;
  --bg-elevated: #131316;
  --bg-subtle: #1c1c21;
  --border: #26262d;
  --border-strong: #3a3a44;
  --text: #e8e8ea;
  --text-muted: #8b8b94;
  --text-subtle: #5a5a63;
  --accent: #00ff9c;
  --accent-strong: #00e08a;
  --accent-soft: rgba(0, 255, 156, 0.1);
  --accent-ring: rgba(0, 255, 156, 0.35);
  --danger: #ff5470;

  --font-sans: ui-sans-serif, -apple-system, "Segoe UI Variable", "Segoe UI",
    "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: clamp(0.75rem, 0.7vw + 0.6rem, 0.85rem);
  --text-sm: clamp(0.875rem, 0.4vw + 0.8rem, 1rem);
  --text-base: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  --text-lg: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --text-xl: clamp(1.5rem, 1.5vw + 1rem, 1.875rem);
  --text-2xl: clamp(1.875rem, 2vw + 1rem, 2.5rem);
  --text-3xl: clamp(2.25rem, 3vw + 1rem, 3rem);
  --text-4xl: clamp(2.5rem, 4vw + 1rem, 4rem);
  --text-6xl: clamp(3rem, 6vw + 1rem, 5.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  --container: 1180px;
  --container-narrow: 920px;
  --container-prose: 720px;
  --nav-height: 64px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfc;
  --bg-elevated: #ffffff;
  --bg-subtle: #f1f1f4;
  --border: #e3e3e8;
  --border-strong: #c8c8d0;
  --text: #15151a;
  --text-muted: #555560;
  --text-subtle: #888892;
  --accent: #00a86b;
  --accent-strong: #008c5a;
  --accent-soft: rgba(0, 168, 107, 0.12);
  --accent-ring: rgba(0, 168, 107, 0.35);
  --shadow-sm: 0 1px 2px rgba(20, 20, 25, 0.06);
  --shadow-md: 0 8px 32px rgba(20, 20, 25, 0.1);
}