:root {
  --cream: #f5f1e8;
  --cream-soft: #ece6d8;
  --ink: #0a0a0a;
  --ink-soft: #2b2b2b;
  --muted: #6e6a60;
  --accent: #f5c84b;
  --accent-ink: #1a1200;
  --accent-soft: #fce4a3;
  --shadow-ink: rgba(10, 10, 10, 0.18);

  --border-w: 3px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-soft: 0 10px 28px rgba(10, 10, 10, 0.08), 0 2px 4px rgba(10, 10, 10, 0.04);

  --font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --max-w: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  --t-fast: 120ms;
  --t-med: 240ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="dark"] {
  --cream: #11100d;
  --cream-soft: #1a1814;
  --ink: #f5f1e8;
  --ink-soft: #d6d2c5;
  --muted: #8a8676;
  --accent: #f5c84b;
  --accent-ink: #1a1200;
  --accent-soft: #2b220c;
  --shadow-ink: rgba(245, 241, 232, 0.12);

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
}