/* Design tokens. The only place raw colour and type values are allowed to live.
   Topic colours are referenced by name from data/topics.json (e.g. "leaf" -> var(--leaf)),
   so adding a topic means adding a token here and a row there — nothing else. */

:root {
  /* surfaces */
  --drawer: #071426;
  --ink: #0b1b33;
  --paper: #fffdf6;
  --dust: rgba(255, 253, 246, 0.55);
  --hair: rgba(255, 253, 246, 0.14);

  /* topic palette */
  --red: #ff4e6a;
  --teal: #2ecfa8;
  --marigold: #ffc24b;
  --violet: #9b6bff;
  --leaf: #6fd34e;
  --sky: #4ea8ff;
  --aqua: #19b5c9;
  --rust: #c4623b;
  --peach: #ff9f5a;

  /* type */
  --display: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --body: -apple-system, "Avenir Next", system-ui, sans-serif;
  --util: ui-monospace, "SF Mono", Menlo, monospace;

  /* ink-on-paper text, tuned for contrast on --paper */
  --ink-hook: #12203a;
  --ink-body: #20304a;
  --ink-soft: rgba(11, 27, 51, 0.55);
  --ink-hair: rgba(11, 27, 51, 0.14);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* the drawer rail is fixed to the bottom; the page reserves room for it */
  --drawer-h: 160px;
}

/* Topic colour is picked at runtime from data/topics.json, but the CSP has no
   'unsafe-inline' for style-src, so the JS can't set it via style="background:...".
   These classes are the bridge: JS applies the class, the colour lives here. */
.c-red {
  --c: var(--red);
}
.c-teal {
  --c: var(--teal);
}
.c-marigold {
  --c: var(--marigold);
}
.c-violet {
  --c: var(--violet);
}
.c-leaf {
  --c: var(--leaf);
}
.c-sky {
  --c: var(--sky);
}
.c-aqua {
  --c: var(--aqua);
}
.c-rust {
  --c: var(--rust);
}
.c-peach {
  --c: var(--peach);
}