:root {
  --color-field: #0a0a0a;
  --color-ink: #f5f5f2;
  --color-mute: #a8a8a3;
  --color-line: rgb(245 245 242 / 0.16);
  --color-line-strong: rgb(245 245 242 / 0.4);
  --color-logo-ground: #ffffff;
  --color-logo-ink: #000000;
  --color-focus: #f5f5f2;

  --font-display: "Syne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-display-xl: clamp(2.35rem, 6.4vw, 5.25rem);
  --text-display: clamp(1.75rem, 3.2vw, 2.75rem);
  --text-title: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.8125rem;
  --text-micro: 0.6875rem;

  --leading-display: 1.02;
  --leading-body: 1.55;
  --tracking-display: -0.03em;
  --tracking-label: 0.18em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  --radius: 0;
  --line: 1px;
  --button-pad-y: 0.85rem;
  --button-pad-x: 1.35rem;
  --page-pad: clamp(1.25rem, 4vw, 3.5rem);
  --max-board: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] {
  --color-field: #f5f5f2;
  --color-ink: #0a0a0a;
  --color-mute: #57575c;
  --color-line: rgb(10 10 10 / 0.16);
  --color-line-strong: rgb(10 10 10 / 0.4);
  --color-logo-ground: #000000;
  --color-logo-ink: #ffffff;
  --color-focus: #0a0a0a;
}