:root {
  --bg: #080b09;
  --surface: #0e1310;
  --text: #edf4ee;
  --muted: #929d95;
  --line: rgba(220, 244, 226, 0.12);
  --accent: #8df0b2;
  --on-accent: #07140d;
  --accent-ink: var(--accent);
  --surface-2: color-mix(in srgb, var(--text) 5%, var(--surface));
  --line-strong: color-mix(in srgb, var(--text) 22%, transparent);
  --danger: #ff8a93;
  --warning: #f2c066;
  --contrib-0: #202a23;
  --contrib-1: #244b33;
  --contrib-2: #32784b;
  --contrib-3: #4caf70;
  --contrib-4: #8df0b2;

  --font-display: 'Syne', 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', Inter, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

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

  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.35);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #f8f9f6;
    --surface: #ffffff;
    --text: #18251d;
    --muted: #5d6b61;
    --line: rgba(24, 52, 34, 0.13);
    --accent: #2d9858;
    --on-accent: #07140d;
    --accent-ink: #1f7a45;
    --surface-2: color-mix(in srgb, var(--text) 5%, var(--surface));
    --line-strong: color-mix(in srgb, var(--text) 22%, transparent);
    --danger: #c43f46;
    --warning: #a86a12;
    --contrib-0: #e6ebe5;
    --contrib-1: #c5e3cb;
    --contrib-2: #8dcc9b;
    --contrib-3: #4ba967;
    --contrib-4: #27884d;
    --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.06);
  }
}

:root[data-theme='light'] {
  --bg: #f8f9f6;
  --surface: #ffffff;
  --text: #18251d;
  --muted: #5d6b61;
  --line: rgba(24, 52, 34, 0.13);
  --accent: #2d9858;
  --on-accent: #07140d;
  --accent-ink: #1f7a45;
  --surface-2: color-mix(in srgb, var(--text) 5%, var(--surface));
  --line-strong: color-mix(in srgb, var(--text) 22%, transparent);
  --danger: #c43f46;
  --warning: #a86a12;
  --contrib-0: #e6ebe5;
  --contrib-1: #c5e3cb;
  --contrib-2: #8dcc9b;
  --contrib-3: #4ba967;
  --contrib-4: #27884d;
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.06);
}

:root[data-theme='dark'] {
  --bg: #080b09;
  --surface: #0e1310;
  --text: #edf4ee;
  --muted: #929d95;
  --line: rgba(220, 244, 226, 0.12);
  --accent: #8df0b2;
  --on-accent: #07140d;
  --accent-ink: var(--accent);
  --surface-2: color-mix(in srgb, var(--text) 5%, var(--surface));
  --line-strong: color-mix(in srgb, var(--text) 22%, transparent);
  --danger: #ff8a93;
  --warning: #f2c066;
  --contrib-0: #202a23;
  --contrib-1: #244b33;
  --contrib-2: #32784b;
  --contrib-3: #4caf70;
  --contrib-4: #8df0b2;
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.35);
}