:root {
  /* surfaces — warm, light */
  --surface-0: #FAF8F4;
  --surface-1: #F1EEE8;
  --surface-2: #FFFFFF;
  --surface-glass: rgb(255 255 255 / 0.72);
  --surface-glass-strong: rgb(255 255 255 / 0.88);
  /* ink */
  --navy: #0B1B3F;
  --navy-soft: #16295A;
  --text: #1E1E22;
  --text-muted: #5C5F66;
  --text-on-navy: #FFFFFF;
  --text-on-navy-muted: rgb(255 255 255 / 0.74);
  /* accent — the logo's emerald */
  --accent: #1DB954;
  --accent-deep: #0E8C4A;
  --accent-soft: #7EE2A8;
  --accent-tint: rgb(29 185 84 / 0.12);
  /* lines & shadow */
  --line: rgb(11 27 63 / 0.10);
  --line-strong: rgb(11 27 63 / 0.18);
  --shadow-sheet: 0 -24px 60px rgb(11 27 63 / 0.06), 0 -2px 0 rgb(255 255 255 / 0.6);
  --shadow-card: 0 1px 2px rgb(11 27 63 / 0.04), 0 12px 32px rgb(11 27 63 / 0.06);
  --shadow-glass: 0 24px 64px rgb(11 27 63 / 0.12);
  /* shape */
  --sheet-radius: clamp(28px, 4vw, 48px);
  --sheet-overlap: clamp(28px, 4vw, 48px);
  --card-radius: 20px;
  --pill: 999px;
  /* type */
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-base: 1.0625rem;
  --measure: 65ch;
  /* rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: clamp(4rem, 9vw, 7.5rem);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 700ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #17171A;
    --surface-1: #1F1F24;
    --surface-2: #26262C;
    --surface-glass: rgb(38 38 44 / 0.72);
    --surface-glass-strong: rgb(38 38 44 / 0.9);
    --text: #F3F1EC;
    --text-muted: #B6B3AC;
    --line: rgb(255 255 255 / 0.10);
    --line-strong: rgb(255 255 255 / 0.2);
    --accent: #3BD676;
    --accent-deep: #7EE2A8;
    --shadow-sheet: 0 -24px 60px rgb(0 0 0 / 0.35);
    --shadow-card: 0 12px 32px rgb(0 0 0 / 0.3);
    --shadow-glass: 0 24px 64px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface-0: #17171A;
  --surface-1: #1F1F24;
  --surface-2: #26262C;
  --surface-glass: rgb(38 38 44 / 0.72);
  --surface-glass-strong: rgb(38 38 44 / 0.9);
  --text: #F3F1EC;
  --text-muted: #B6B3AC;
  --line: rgb(255 255 255 / 0.10);
  --line-strong: rgb(255 255 255 / 0.2);
  --accent: #3BD676;
  --accent-deep: #7EE2A8;
  --shadow-sheet: 0 -24px 60px rgb(0 0 0 / 0.35);
  --shadow-card: 0 12px 32px rgb(0 0 0 / 0.3);
  --shadow-glass: 0 24px 64px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}