/* tokens.css — 8 aesthetic "vibe" themes. Reskin by editing values or adding a [data-theme].
   Design tokens live at the very top so the whole app is themable from one place.
   Fonts: self-hosted @font-face declarations (Fraunces for headings, Bricolage Grotesque
   for body) live in css/base.css, right below these variables — see base.css comment.
   Contrast: --ink-soft, --primary, --good and --accent were all re-solved with a WCAG
   relative-luminance script against every background they are actually painted on in
   each theme (--bg, --surface, --surface-2, and — for the two gradient themes — the
   darkest gradient stop and the translucent surface composited over it). Normal text
   clears 4.5:1 everywhere; UI components/graphical objects (habit-water ring + icon,
   .habit.done border, tip-card accent stripe) clear 3:1 everywhere, with margin.
   Accents: each theme has its OWN --accent hue — no value is reused across themes. */
:root {
  --radius: 18px; --radius-sm: 12px; --space: 16px;
  /* Heading font: Fraunces (optical-size + weight variable axis), self-hosted.
     Body font: Bricolage Grotesque, self-hosted. Both fall back to a metric-matched
     local face (defined in base.css) then the system stack, so first paint never
     waits on a network font and layout barely shifts on swap. */
  --font-heading: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font: "Bricolage Grotesque", "Bricolage Grotesque Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 560px;
  /* CREAM (default) — signature warm terracotta-on-cream */
  --bg:#F6EEE2; --grad:none; --surface:#FCF8F1; --surface-2:#EFE4D4; --ink:#3A322A; --ink-soft:#70655E;
  --primary:#A45731; --primary-ink:#FCF8F1; --accent:#AD8733; --line:#E7DAC6; --danger:#A6442E; --good:#76966E;
}
[data-theme="sage"] {
  --bg:#EAF1E8; --surface:#F5FAF2; --surface-2:#DBE7D6; --ink:#2E382C; --ink-soft:#60665D;
  --primary:#607158; --primary-ink:#F5FAF2; --accent:#819553; --line:#D4E2CE; --danger:#A6442E; --good:#5E7A57;
}
[data-theme="peach"] {
  --bg:#FCEDE3; --surface:#FFF7F1; --surface-2:#F7DDCD; --ink:#3F2E26; --ink-soft:#726052;
  --primary:#B1502A; --primary-ink:#FFF7F1; --accent:#4F9B8C; --line:#F2D8C7; --danger:#B14E38; --good:#779665;
}
[data-theme="lavender"] {
  --bg:#EFEAF7; --surface:#F9F5FE; --surface-2:#E2DAF1; --ink:#322B44; --ink-soft:#675D78;
  --primary:#6F5EB1; --primary-ink:#F9F5FE; --accent:#C47390; --line:#DED4F0; --danger:#9B4A6E; --good:#74946B;
}
[data-theme="mocha"] {
  --bg:#EFE6DB; --surface:#F8F2EA; --surface-2:#E2D3C2; --ink:#3A2E25; --ink-soft:#655A53;
  --primary:#7E6148; --primary-ink:#F8F2EA; --accent:#5E8A82; --line:#E1D2C0; --danger:#9B5440; --good:#719169;
}
[data-theme="dark"] {
  --bg:#1C1A22; --surface:#262430; --surface-2:#2F2C3A; --ink:#EDE7DC; --ink-soft:#A99FB0;
  --primary:#C58CA8; --primary-ink:#1C1A22; --accent:#D8B25E; --line:#383544; --danger:#E08368; --good:#9DBE97;
}
[data-theme="sunset"] { /* novel — dreamy warm gradient */
  --bg:#F7C9A2; --grad:linear-gradient(160deg,#FBD6B0 0%,#F3A98E 45%,#D98AA8 100%);
  --surface:rgba(255,250,244,0.9); --surface-2:rgba(255,250,244,0.62); --ink:#3A2426; --ink-soft:#3A3838;
  --primary:#6A1B2D; --primary-ink:#FFF7F1; --accent:#CB561E; --line:rgba(90,55,55,0.22); --danger:#612414; --good:#4A6E58;
}
[data-theme="coquette"] { /* novel — soft pink + bows, #thatgirl */
  --bg:#FBE6EC; --grad:linear-gradient(160deg,#FDEFF3 0%,#F8D6E0 100%);
  --surface:#FFF6F9; --surface-2:#F8DCE5; --ink:#4A2C38; --ink-soft:#795A67;
  --primary:#B03553; --primary-ink:#FFF6F9; --accent:#9B6B8C; --line:#F3D2DD; --danger:#953A2A; --good:#7A9268;
}