:root{
  --purple:#bc509b; --pink:#e84985; --salmon:#ff665e;
  --orange:#ff8657; --yellow:#ffb357;
  --ink:#181818; --cream:#f5f3ee; --paper:#fff;
  --line:#e6e1dd; --muted:#716d6c;
  --green:#06c270; --red:#ff3b3b;
  --yh-radius:18px; --yh-radius-sm:11px;
  --yh-font:Gilroy,Manrope,"Avenir Next","Segoe UI",Arial,sans-serif;
  /* Headings. The brand guide gives most brands a separate display
     face from their body face; where they are the same this is just
     the same stack. Defined here so the token always resolves, even
     with no theme applied. */
  --yh-font-display:var(--yh-font);
  --yh-brandbar:linear-gradient(90deg,var(--purple),var(--pink),var(--salmon),var(--orange),var(--yellow));
}

/* Dark mode. The brand hues are unchanged — only the neutrals flip, so salmon
   stays the action colour and keeps its contrast against dark text. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2efe9;
    --cream: #141312;
    --paper: #1e1c1a;
    --line: #322f2c;
    --muted: #a09a94;
  }
}
:root[data-theme="dark"] {
  --ink: #f2efe9;
  --cream: #141312;
  --paper: #1e1c1a;
  --line: #322f2c;
  --muted: #a09a94;
}
:root[data-theme="light"] {
  --ink: #181818;
  --cream: #f5f3ee;
  --paper: #ffffff;
  --line: #e6e1dd;
  --muted: #716d6c;
}