:root {
  color-scheme: light;
  --canvas: #eae4dc;
  --surface: #f2ece4;
  --raised: #f5efe8;
  --well: #e9e2d9;
  --ink: #392f2a;
  --muted: #706158;
  --line: #d8cfc5;
  --accent: #b64d32;
  --accent-ink: #fff7eb;
  --accent-soft: #eed5c6;
  --hero: #e9c8ad;
  --hero-ink: #8d402a;
  --shadow: #d3cbc1;
  --light: #fffaf3;
  --green: #4e6951;
  --green-soft: #dce5d5;
  --purple: #775e87;
  --purple-soft: #e6ddeb;
  --yellow: #8b682d;
  --yellow-soft: #eee0bf;
  --pink: #9f5266;
  --pink-soft: #f0dce0;
  --lift: 7px 7px 18px var(--shadow),
    -7px -7px 18px var(--light);
  --small-lift: 3px 3px 7px var(--shadow),
    -3px -3px 7px var(--light);
  --inset: inset 3px 3px 7px var(--shadow),
    inset -3px -3px 7px var(--light);
  --radius: 23px;
  --radius-small: 13px;
  --motion: 180ms;
}

[data-theme="bonbon"] {
  --canvas: #f1dbf3;
  --surface: #fbeefa;
  --raised: #fff5ff;
  --well: #eecded;
  --ink: #43204e;
  --muted: #704b6c;
  --line: #d8aed8;
  --accent: #a9166b;
  --accent-ink: #fff9fe;
  --accent-soft: #f8b8df;
  --hero: #ee6cc5;
  --hero-ink: #5b156e;
  --shadow: #c5a2ce;
  --light: #fff7ff;
  --green: #166854;
  --green-soft: #b5efdf;
  --purple: #6530a2;
  --purple-soft: #ddbbff;
  --yellow: #7b4f13;
  --yellow-soft: #ffe5a0;
  --pink: #a31963;
  --pink-soft: #ffbce0;
}

[data-theme="afterglow"] {
  color-scheme: dark;
  --canvas: #27252d;
  --surface: #302d35;
  --raised: #35313a;
  --well: #29262f;
  --ink: #f2e6da;
  --muted: #b9aab7;
  --line: #49414d;
  --accent: #f2b18b;
  --accent-ink: #392626;
  --accent-soft: #4a3735;
  --hero: #443338;
  --hero-ink: #e5a07e;
  --shadow: #211f26;
  --light: #3c3743;
  --green: #b1d4b3;
  --green-soft: #35483e;
  --purple: #d2b5e8;
  --purple-soft: #45394f;
  --yellow: #e4c886;
  --yellow-soft: #4b4232;
  --pink: #e6a9c2;
  --pink-soft: #4d3646;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button, input, select { color: inherit; }
button { background: none; border: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 20px; height: 20px; }
h1, h2, h3, p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

button, a {
  transition: transform var(--motion), background var(--motion),
    box-shadow var(--motion);
}

button:active { transform: translateY(1px); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.mono, code, kbd {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.icon-button:hover { background: var(--well); }
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 17px;
  border-radius: var(--radius-small);
  font-size: 12px;
  font-weight: 650;
}
.primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 2px 3px 6px var(--shadow);
}
.primary:hover { filter: brightness(1.08); }
.primary svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
  *, *::before, *::after { animation: none !important; }
}