:root {
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  --z-base: 0;
  --z-sticky: 40;
  --z-mascot: 60;
  --z-overlay: 80;

  --canvas: #0e0f11;
  --surface: #16181b;
  --surface-raised: #1e2126;
  --surface-sunken: #090a0c;
  --surface-invert: #f2f4f5;
  --line: #272b31;
  --line-strong: #6e767f;
  --ink: #f2f4f5;
  --ink-muted: #b4bcc4;
  --ink-faint: #8b949d;
  --ink-invert: #15181b;
  --accent: #aeb8f8;
  --accent-ink: #b6c0fa;
  --accent-soft: #1a1e33;
  --on-accent: #10132b;
  --ok: #5ad2c4;
  --ok-soft: #102a28;
  --warn: #f0b63f;
  --warn-soft: #2e2411;
  --risk: #ff8475;
  --risk-soft: #331816;
  --focus: #f2f4f5;
  --mask: #2b3037;
  --scrim: #0a0b0dcc;

  --shadow-sm: 0 1px 2px 0 #00000066;
  --shadow-md: 0 8px 24px -8px #00000099;
  --shadow-lg: 0 24px 64px -16px #000000b3;
  --shadow-accent: 0 8px 28px -10px #cbf24e59;
}

:root[data-theme="light"] {
  --canvas: #f1f2f4;
  --surface: #ffffff;
  --surface-raised: #f8f9fb;
  --surface-sunken: #e6e8ec;
  --surface-invert: #16181b;
  --line: #e3e6ea;
  --line-strong: #7e8791;
  --ink: #15181b;
  --ink-muted: #4e5862;
  --ink-faint: #616b75;
  --ink-invert: #f4f5f7;
  --accent: #8d9bf0;
  --accent-ink: #4a55bd;
  --accent-soft: #e8ebfd;
  --on-accent: #10132b;
  --ok: #0d6f68;
  --ok-soft: #d6f1ee;
  --warn: #8a5a00;
  --warn-soft: #fbeed1;
  --risk: #b3261e;
  --risk-soft: #fcdedb;
  --focus: #15181b;
  --mask: #d4d9df;
  --scrim: #15181bb3;

  --shadow-sm: 0 1px 2px 0 #15181b14;
  --shadow-md: 0 8px 24px -10px #15181b26;
  --shadow-lg: 0 24px 64px -20px #15181b2e;
  --shadow-accent: 0 8px 28px -12px #4d6a0c40;
}