/* Design tokens from the teacher's Canva mood board.
   Settings › Theme overrides the palette, the color roles and the fonts at runtime (js/ui/theme.js). */
:root {
  /* Palette, in the teacher's order */
  --yellow: #ffcb12;
  --orange: #e78722;
  --red: #ff4836;
  --raspberry: #e44467;
  --pink: #fe75af;
  --mauve: #a883ad;
  --periwinkle: #8a98e1;
  --blue: #4692dd;
  --aqua: #5ec3c3;
  --teal: #1b8a87;
  --green: #27994e;
  --lime: #b7c733;

  /* Roles */
  --ink: #1f1a24;
  --ink-soft: #4a4250;
  --muted: #8b8193;
  --rule: #c9bfd0;
  --page-bg: #faf6fb;
  --queue-bg: #e7d3ea;
  --queue-page-bg: #f6eef8;
  --points-bg: #f1ccdb;
  --nav-hover: #f3e9f5;
  --tab-off: #ece5ef;
  --title-color: #fe75af;
  --queue-title-color: #a883ad;
  --pink-shadow: #e44467;
  --mauve-shadow: #5e4363;
  --mauve-text: #6a4870;
  --link: #1b8a87;
  --link-hover: #145f5d;
  --focus: #4692dd;
  --scrim: rgba(31, 26, 36, 0.45);
  --mint: #e9f5ee;
  --money-green: #1f6e3a;
  --row-pick: #fff6cf;

  /* Queue numerals: one palette color per digit, so editing the palette recolors them too */
  --d1: var(--blue);
  --d2: var(--lime);
  --d3: var(--yellow);
  --d4: var(--mauve);
  --d5: var(--pink);
  --d6: var(--green);
  --d7: var(--aqua);
  --d8: var(--red);
  --d9: var(--orange);
  --d0: var(--teal);

  /* Type. --font-title is Sniglet until Genty is uploaded in Settings › Theme. */
  --font-display: 'Shrikhand', serif;
  --font-title: 'Sniglet', 'Fredoka', sans-serif;
  --font-ui: 'Fredoka', sans-serif;
  --font-body: 'Didact Gothic', sans-serif;

  /* Lines and shapes */
  --line: 2.5px;
  --radius-btn: 14px;
  --radius-card: 24px;
}