:root, [data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f7f7f7;
  --color-surface-offset: #eef0f3;
  --color-divider: #dee1e6;
  --color-border: #dee1e6;

  --color-text: #0a0b0d;
  --color-text-muted: #5b616e;
  --color-text-faint: #7c828a;
  --color-text-inverse: #ffffff;

  --color-primary: #0052ff;
  --color-primary-hover: #003ecc;
  --color-primary-active: #003ecc;
  --color-primary-highlight: #dde1ff;
  --color-primary-disabled: #a8b8cc;

  --color-accent: #f4b000;
  --color-accent-hover: #d99a00;
  --color-accent-active: #bf8600;
  --color-accent-highlight: #fff1cc;

  --color-success: #05b169;
  --color-success-highlight: #e7f7ef;
  --color-error: #cf202f;
  --color-error-highlight: #fde8ea;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.10);

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  --font-display: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 2.25rem;
  --text-2xl: 3.25rem;
  --text-3xl: 4rem;
  --text-hero: clamp(2.5rem, 6vw, 5rem);

  --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;
}

[data-theme="dark"] {
  --color-bg: #0a0b0d;
  --color-surface: #0a0b0d;
  --color-surface-2: #16181c;
  --color-surface-offset: #16181c;
  --color-divider: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-text: #ffffff;
  --color-text-muted: #a8acb3;
  --color-text-faint: #7c828a;
  --color-text-inverse: #0a0b0d;
  --color-primary: #0052ff;
  --color-primary-hover: #003ecc;
  --color-primary-active: #003ecc;
  --color-primary-highlight: rgba(0, 82, 255, 0.20);
  --color-primary-disabled: #a8b8cc;
  --color-accent: #f4b000;
  --color-accent-hover: #d99a00;
  --color-accent-active: #bf8600;
  --color-accent-highlight: rgba(244, 176, 0, 0.20);
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
}