:root {
  --ink: #241430;
  --ink-raised: #322044;
  --paper: #FAF7F2;
  --mint: #A8E6C1;
  --blush: #F5C2E0;
  --sky: #BFD9F2;
  --lavender: #D9C8F0;
  --gold: #E8A020;

  --bg: var(--paper);
  --bg-raised: #FFFFFF;
  --fg: var(--ink);
  --fg-muted: #5C4A6B;
  --border: #E4DCD2;

  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3:  clamp(2.2rem, 1.8rem + 2vw, 3.6rem);
  --step-4:  clamp(3rem, 2.2rem + 4vw, 5.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem;
  --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem;

  --radius: 14px;
  --plate-opacity: 0.85;
}

[data-theme="dark"] {
  --bg: var(--ink);
  --bg-raised: var(--ink-raised);
  --fg: #F3ECF7;
  --fg-muted: #B9A8C7;
  --border: #43305A;
  --plate-opacity: 0.3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --bg-raised: var(--ink-raised);
    --fg: #F3ECF7;
    --fg-muted: #B9A8C7;
    --border: #43305A;
    --plate-opacity: 0.3;
  }
}