/* Design tokens. Custom properties inherit through shadow DOM,
   so every component can read these without any import. */
:root {
  --bg: hsl(250 14% 95%);
  --fg: hsl(250 30% 14%);

  /* per-card colour recipe: hue comes from the topic, the rest from the theme */
  --card-s: 60%; --card-l: 91%;
  --ink-s: 48%;  --ink-l: 13%;
  --soft-s: 24%; --soft-l: 30%;
  --acc-s: 70%;  --acc-l: 28%;
  --btn-s: 60%;  --btn-l: 98%; --btn-a: .72;

  --pill-bg: hsl(250 30% 99% / .78);
  --pill-fg: hsl(250 30% 14%);
  --toast-bg: hsl(250 30% 14%);
  --toast-fg: hsl(250 20% 96%);

  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Literata", Georgia, "Times New Roman", serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: hsl(250 16% 7%);
    --fg: hsl(250 20% 94%);
    --card-s: 34%; --card-l: 13%;
    --ink-s: 30%;  --ink-l: 94%;
    --soft-s: 14%; --soft-l: 75%;
    --acc-s: 85%;  --acc-l: 72%;
    --btn-s: 30%;  --btn-l: 24%; --btn-a: .8;
    --pill-bg: hsl(250 16% 10% / .75);
    --pill-fg: hsl(250 20% 94%);
    --toast-bg: hsl(250 20% 94%);
    --toast-fg: hsl(250 30% 12%);
  }
}

:root[data-theme="dark"] {
  --bg: hsl(250 16% 7%);
  --fg: hsl(250 20% 94%);
  --card-s: 34%; --card-l: 13%;
  --ink-s: 30%;  --ink-l: 94%;
  --soft-s: 14%; --soft-l: 75%;
  --acc-s: 85%;  --acc-l: 72%;
  --btn-s: 30%;  --btn-l: 24%; --btn-a: .8;
  --pill-bg: hsl(250 16% 10% / .75);
  --pill-fg: hsl(250 20% 94%);
  --toast-bg: hsl(250 20% 94%);
  --toast-fg: hsl(250 30% 12%);
  color-scheme: dark;
}