:root {
  color-scheme: light;
  --ink: #292436;
  --muted: #554d62;
  --image: var(--surface);
  --image-ink: var(--ink);
  --rose: var(--raised);
  --rose-ink: var(--ink);
  --sage: var(--surface);
  --sage-ink: var(--ink);
  --sand: var(--raised);
  --sand-ink: var(--ink);
}
[data-palette="lilac"] {
  --bg: #faf7ff;
  --surface: #eee5fa;
  --raised: #e6d9f6;
  --accent: #c7a6ed;
  --accent-ink: #34204e;
  --line: #baa5cf;
}
[data-palette="peach"] {
  --bg: #fff8f0;
  --surface: #ffe9da;
  --raised: #ffddca;
  --accent: #f5ad91;
  --accent-ink: #492719;
  --line: #ccaa98;
}
[data-palette="mint"] {
  --bg: #f3fcf7;
  --surface: #e0f3e9;
  --raised: #cdece0;
  --accent: #a2dbc5;
  --accent-ink: #173f33;
  --line: #93baaa;
}
[data-palette="blue"] {
  --bg: #f5faff;
  --surface: #e6f0fb;
  --raised: #d8e8f7;
  --accent: #adcaf1;
  --accent-ink: #213a60;
  --line: #9eb3cf;
}
.primary:hover, .cta-btn:hover {
  background: var(--accent);
  filter: brightness(.94);
}
:focus-visible, input:focus-visible { outline-color: var(--accent-ink); }
.list-arrow svg, .brand svg { stroke: var(--accent-ink); }
.section-head > button, .age-brand span { color: var(--accent-ink); }
.overlay, dialog::backdrop { background: #292436a8; }
.age {
  background-image: linear-gradient(#29243630, #29243680), var(--age-img);
}