:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: clamp(2.25rem, 5.5vw + 0.75rem, 5.25rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

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

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --container: 1200px;
  --container-narrow: 880px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 360ms;
  --dur-slow: 720ms;

  --accent: #3ee07f;
  --accent-soft: rgba(62, 224, 127, 0.12);
  --accent-strong: #29c96a;
  --warn: #f5a524;
  --warn-soft: rgba(245, 165, 36, 0.14);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --violet: #8b7cff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0e;
  --bg-elev: #101216;
  --surface: #14161a;
  --surface-2: #181b20;
  --border: #22252b;
  --border-strong: #31353d;
  --text: #e8e9ec;
  --text-muted: #9093a0;
  --text-faint: #5f6370;
  --code-bg: #0f1115;
  --code-text: #cfd3db;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.35);
  --grid-line: rgba(255, 255, 255, 0.04);
  --token-line: rgba(62, 224, 127, 0.22);
  --token-line-faint: rgba(255, 255, 255, 0.05);
  --nav-bg: rgba(11, 12, 14, 0.72);
  --nav-border: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafaf8;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3ef;
  --border: #e6e6e1;
  --border-strong: #d0d0c9;
  --text: #14161a;
  --text-muted: #5a5d66;
  --text-faint: #9093a0;
  --code-bg: #f3f3ef;
  --code-text: #2a2d35;
  --shadow-card: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 28px rgba(20, 22, 26, 0.06);
  --grid-line: rgba(20, 22, 26, 0.05);
  --token-line: rgba(41, 201, 106, 0.35);
  --token-line-faint: rgba(20, 22, 26, 0.06);
  --nav-bg: rgba(250, 250, 248, 0.78);
  --nav-border: rgba(20, 22, 26, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}