/*
 * Teemo Travels — design tokens.
 *
 * Injected FIRST, before teemo-mobile.css. One place for the values that every
 * scene shares, so "make the buttons a different blue" is one line here instead
 * of a find-and-replace across scene1-lesson-overrides.css, scene2-lesson.css
 * and teemo-mobile.css with no guarantee you caught them all.
 *
 * These names describe a ROLE, not a colour. --tt-ink, not --tt-dark-blue: the
 * point is that a scene asks for "the ink colour" and gets whatever that
 * currently is. Renaming the value should never mean renaming the token.
 *
 * Every value below was already in the codebase — this file did not invent a
 * palette, it collected one. The counts are how many literal copies existed
 * across scene 1, scene 2 and the mobile layer when it was written
 * (2026-09-19).
 */
:root{
  /* --- text & structure ------------------------------------------- */
  --tt-ink:#24356f;          /* headings, body copy            (28x) */
  --tt-ink-soft:#52668e;     /* secondary text, hints           (4x) */
  --tt-brown:#70421f;        /* the wooden UI furniture        (36x) */
  --tt-white:#fff;           /* card backgrounds               (32x) */

  /* --- accents ---------------------------------------------------- */
  --tt-blue:#416fae;         /* button borders, active state    (9x) */
  --tt-blue-bright:#1877d2;  /* links, emphasis                 (5x) */
  --tt-blue-pale:#9bb7df;    /* disabled, dividers              (8x) */
  --tt-blue-faint:#8ea8d7;   /* fainter dividers                (2x) */
  --tt-gold:#ffd34f;         /* Teemo's highlight, rewards     (10x) */

  /* --- state: right, wrong, waiting ------------------------------- */
  --tt-green:#23743b;        /* correct — text                 (15x) */
  --tt-green-mid:#2f9d57;    /* correct — borders, fills       (10x) */
  --tt-green-pale:#e8f8ec;   /* correct — background            (4x) */
  --tt-green-faint:#dff4e4;  /* correct — fainter background    (3x) */
  --tt-red:#b32626;          /* wrong — text and borders        (8x) */

  /* --- tinted backgrounds ----------------------------------------- */
  --tt-blue-bg:#e4f0ff;      /* hover / selected panel          (8x) */
  --tt-blue-bg-faint:#f1f7ff;/* the lightest panel tint         (3x) */

  /* --- shape ------------------------------------------------------ */
  --tt-radius:12px;
  --tt-radius-sm:9px;
  --tt-radius-round:50%;
  --tt-gap:8px;

  /* --- touch ------------------------------------------------------ */
  /* 44px is the smallest reliable touch target for an adult; children
     are less accurate, not more, so nothing tappable goes below it. */
  --tt-tap-min:44px;
  --tt-mic-size:64px;        /* overridden per context; see teemo-mobile.css */
}