:root {
  --void: #0b0b0c;
  --void-elevated: #121214;
  --void-soft: #1a1a1d;
  --paper: #f3eee6;
  --paper-dim: #e6e0d6;
  --steel: #8a8680;
  --steel-bright: #b8b3ab;
  --copper: #c4a574;
  --copper-bright: #d4bc8e;
  --copper-dim: #8f7550;
  --signal: #fafaf8;
  --ink: #0b0b0c;

  --sage: #8fa889;
  --rose: #c98986;
  --amber: #d4a45a;
  --slate: #7f93b0;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-ui: 180ms;
  --duration-move: 280ms;
  --duration-reveal: 800ms;
  --duration-page: 700ms;

  --font-display: "Syne", "Gill Sans", "Trebuchet MS", sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --max: 1440px;
  --gutter: 24px;
  --pad-x: clamp(20px, 4vw, 64px);
  --section-y: clamp(64px, 12vw, 180px);
  --radius: 2px;
  --header-h: 72px;

  --grid-color: rgba(196, 165, 116, 0.07);
  --line: rgba(243, 238, 230, 0.1);
  --line-strong: rgba(243, 238, 230, 0.18);
  --shadow-deep: 0 40px 80px rgba(0, 0, 0, 0.45);

  --cursor-size: 8px;
  --cursor-ring: 36px;
}

[data-theme="paper"] {
  --void: #f3eee6;
  --void-elevated: #fafaf8;
  --void-soft: #e8e2d8;
  --paper: #0b0b0c;
  --paper-dim: #1a1a1d;
  --steel: #6b6762;
  --steel-bright: #3f3c39;
  --signal: #0b0b0c;
  --grid-color: rgba(11, 11, 12, 0.06);
  --line: rgba(11, 11, 12, 0.1);
  --line-strong: rgba(11, 11, 12, 0.18);
}

@media (max-width: 768px) {
  :root {
    --header-h: 64px;
    --gutter: 16px;
  }
}