:root {
  --color-bg: #0b0d10;
  --color-surface: #12161a;
  --color-surface-2: #1a2026;
  --color-text: #e6e9ef;
  --color-muted: #9aa3ad;
  --color-accent: #44D62B;
  --color-accent-2: #2bb5d6;
  --space-0: 0;
  --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;
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --shadow-1: 0 2px 8px rgba(0,0,0,.2);
  --shadow-2: 0 8px 24px rgba(0,0,0,.3);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --container: 1200px;
  --gutter: 24px;

  --step--1: clamp(0.84rem, 0.78rem + 0.3vw, 0.95rem);
  --step-0: clamp(1.00rem, 0.94rem + 0.4vw, 1.10rem);
  --step-1: clamp(1.25rem, 1.12rem + 0.6vw, 1.50rem);
  --step-2: clamp(1.56rem, 1.42rem + 1.0vw, 2.00rem);
  --step-3: clamp(1.95rem, 1.70rem + 1.6vw, 2.60rem);
  --step-4: clamp(2.44rem, 2.10rem + 2.4vw, 3.40rem);
}
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #0b0d10;
    --color-surface: #12161a;
    --color-surface-2: #1a2026;
    --color-text: #e6e9ef;
    --color-muted: #9aa3ad;
    --color-accent: #44D62B;
  }
}