/* hwthinking.in: the names the pages use, mapped onto the design system.
   /ds/tokens.css is the design system itself; this file is the site's side
   of the contract. Every page links both, before its own <style>, so a token
   changed in the design system reaches every page. Public pages are light;
   admin pages (and /shipping) set data-theme="dark" on <html>.
   A page may still keep a value of its own, in its own :root, only when the
   design system has no such colour (e.g. the finance page's chart colours). */

:root {
  --accent: var(--hw-violet-500);
  --accent2: var(--hw-violet-600);
  --bg: var(--hw-white);
  --bg2: var(--hw-grey-50);
  --card: var(--hw-white);
  --card2: var(--hw-grey-50);
  --text: var(--hw-grey-900);
  --muted: var(--hw-grey-600);
  --border: var(--hw-grey-200);
  --ok: var(--hw-ok);
  --err: var(--hw-err);
  --gold: var(--hw-gold);
  --booked: var(--hw-booked);
  --student: var(--hw-student);
  --cause: var(--hw-cause);
  /* Not a design-system colour yet: the challenge pages' code panels. */
  --code-bg: #1a1a26;
}

[data-theme="dark"] {
  --accent: var(--hw-admin-accent);
  --accent2: var(--hw-admin-accent2);
  --bg: var(--hw-ink-950);
  --bg2: var(--hw-ink-900);
  --bg3: var(--hw-ink-800);
  --card: var(--hw-ink-850);
  --text: var(--hw-ink-100);
  --muted: var(--hw-ink-400);
  --border: var(--hw-ink-700);
  --ok: var(--hw-ok-dark);
  --err: var(--hw-err-dark);
  --gold: var(--hw-amber);
}