:root {
  color-scheme: dark;

  /* Palette */
  --ink: #17152d;
  --ink-raised: #1f1d3a;
  --ink-panel: #28264b;
  --ink-deep: #0f0e21;
  --line: rgb(190 184 255 / 0.13);
  --line-strong: rgb(190 184 255 / 0.26);
  --paper: #f1ece2;
  --mist: #aaa6c6;
  --mist-dim: #817d9f;
  --gold: #f2a93b;
  --gold-soft: #f7c877;
  --gold-wash: rgb(242 169 59 / 0.12);
  --teal: #62d3b9;
  --teal-wash: rgb(98 211 185 / 0.1);

  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-s: 0.9375rem;
  --text-m: 1.125rem;
  --text-l: 1.3125rem;
  --text-xl: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  --text-display: clamp(3.75rem, 1.2rem + 9.5vw, 9rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.65;

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-section: clamp(5.5rem, 3rem + 7vw, 10rem);

  /* Layout */
  --container: 76rem;
  --gutter: clamp(1.25rem, 0.4rem + 3.2vw, 3rem);
  --column-gap: clamp(1rem, 0.4rem + 1.6vw, 2rem);
  --header-height: 4rem;
  --measure: 36rem;

  /* Shape and depth */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-device: 2.25rem;
  --shadow-frame: 0 2.5rem 4rem -1.75rem rgb(4 3 16 / 0.85), 0 0 0 1px var(--line);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-s: 160ms;
  --duration-m: 320ms;
  --duration-l: 700ms;
}