@font-face{font-family:"Bagel Fat One";src:url("/fonts/bagel-fat-one.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/fonts/public-sans.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Shantell Sans";src:url("/fonts/shantell-sans.woff2") format("woff2");font-weight:300 800;font-display:swap}
/* Herecade design tokens · brand guide edition 2 (riso)
   Use these and nothing else. No extra greys, no framework palette. */



:root {
  /* Inks */
  --hc-sunny: #FFD43B;      /* big grounds, primary buttons, selection, Quick quiz */
  --hc-ink: #1D2B6B;        /* all text, borders, logo. Our black. */
  --hc-newsprint: #F3EEE2;  /* default page/screen ground (light) */
  --hc-paper: #FFFDF6;      /* cards, answers, sheets; text on ink */
  --hc-pink: #FF48B0;       /* misprint offset + focus ring only. Never small text. */
  --hc-teal: #0F7C80;       /* tape, stickers, "right answer" (with paper text) */
  --hc-pencil: #A3114F;     /* handwritten notes, "not this one" */
  --hc-mint: #A8DFC0;       /* Word hunt accent */

  /* Semantic (light) */
  --hc-bg: var(--hc-newsprint);
  --hc-surface: var(--hc-paper);
  --hc-text: var(--hc-ink);
  --hc-line: var(--hc-ink);
  --hc-selected: var(--hc-sunny);
  --hc-correct: var(--hc-teal);
  --hc-wrong: var(--hc-pencil);
  --hc-focus: var(--hc-ink);

  /* Type */
  --hc-font-display: "Bagel Fat One", Arial, sans-serif; /* names, headlines, clocks; 48px+ */
  --hc-font-text: "Public Sans", Arial, sans-serif;      /* everything read during play */
  --hc-font-hand: "Shantell Sans", Arial, sans-serif;    /* margin notes only, max one per screen */
  --hc-answer-size: 29.333px;   /* minimum in-game answer text */
  --hc-question-size: 30px;

  /* Shape & space */
  --hc-line-width: 2px;
  --hc-radius-control: 14px;
  --hc-radius-answer: 16px;
  --hc-radius-card: 20px;
  --hc-target-min: 48px;
  --hc-target-primary: 72px;
  --hc-space-1: 8px;
  --hc-space-2: 16px;
  --hc-space-3: 24px;
  --hc-space-4: 40px;
  --hc-space-5: 64px;

  /* The only shadow: hard ink offset on primary buttons, closes on press */
  --hc-press-shadow: 4px 4px 0 var(--hc-ink);
  --hc-press-offset: 4px;

  /* Motion */
  --hc-ease: cubic-bezier(.2, .7, .2, 1);
  --hc-dur-press: 90ms;
  --hc-dur-pick: 140ms;
  --hc-dur-sheet: 220ms;
  --hc-dur-sticker: 300ms;
}

/* Dark mode: ink ground, paper text, sunny selection, pink for focus only */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hc-bg: var(--hc-ink);
    --hc-surface: #26367F;
    --hc-text: var(--hc-paper);
    --hc-line: var(--hc-paper);
    --hc-focus: var(--hc-pink);
    --hc-press-shadow: 4px 4px 0 var(--hc-paper);
  }
}
:root[data-theme="dark"] {
  --hc-bg: var(--hc-ink);
  --hc-surface: #26367F;
  --hc-text: var(--hc-paper);
  --hc-line: var(--hc-paper);
  --hc-focus: var(--hc-pink);
  --hc-press-shadow: 4px 4px 0 var(--hc-paper);
}

/* QR share screen stays black on white in every mode */
.hc-qr-screen { background: #FFFFFF; color: #000000; }

@media (prefers-reduced-motion: reduce) {
  :root { --hc-dur-press: 0ms; --hc-dur-pick: 0ms; --hc-dur-sheet: 0ms; --hc-dur-sticker: 0ms; }
}