/* ── the brand face ──────────────────────────────────────────────────────
   Baloo 2 — rounded, chunky and warm, and the whole reason the site does not
   look like a form.

   It has to be declared here, not only in the site's global.css: a page under
   /brand/ never loads that file, so every course and every game was asking for
   "Baloo 2" and silently getting Segoe UI. The tokens name the font, so the
   tokens must also supply it.

   Split by script with unicode-range, so a Marathi page never downloads the
   Latin file and vice versa. A downloaded offline folder has no /fonts/ and
   falls back to the system stack, which is the correct trade: the words are
   readable either way, and a zip should not carry four font files.
*/
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/baloo2-devanagari-400.woff2') format('woff2');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/baloo2-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/baloo2-devanagari-700.woff2') format('woff2');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/baloo2-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* BappaTutions tokens — the one place a colour, a gap or a duration is decided.
 *
 * The values are copied from src/styles/global.css rather than invented, because
 * an assessment has to look like the lesson the child just watched. A quiz in
 * slightly different oranges reads as a different website, and a child who has
 * just been taught something should not have to work out where they are before
 * they can answer.
 *
 * It lives in brand/ rather than src/ for the reason everything here does: a
 * teacher downloads a folder and opens it on a classroom laptop with no
 * internet, so the tokens have to travel inside the zip.
 *
 * Only the assessment engines consume these. The thirteen older games carry
 * their own literals and are left alone — rewriting working games to import a
 * variable is churn, not progress.
 */

:root {
  /* ── palette ──────────────────────────────────────────────────────────
     Kept in step with the site and with the app's tailwind.config.js. */
  --bt-saffron: #FF9933;
  --bt-gold: #FFD54F;
  --bt-teal: #00897B;
  --bt-purple: #7E57C2;
  --bt-rose: #EC407A;
  --bt-sky: #4FC3F7;
  --bt-green: #158F41;

  --bt-ink: #2B2118;
  --bt-ink-soft: #6D5B4B;
  --bt-cream: #FFF8EC;
  --bt-card: #FFFFFF;
  --bt-line: rgb(120 70 20 / 0.22);

  /* The wash behind whatever is being talked about right now — the fruit as
     its name is spoken, the story panel the narrator is on. Its own token
     rather than a colour written into each place that highlights something:
     there are two of those already and there will be more, and they have to
     agree or the same idea reads as two different ones.

     Between cream and gold on purpose. Cream is invisible against the card,
     and gold is loud enough to compete with the thing it is pointing at. */
  --bt-lit: #FFF1C2;

  /* ── verdicts ─────────────────────────────────────────────────────────
     Green and a warm orange, never red. Red is the colour of a mark on a
     school book and it is the thing a nervous learner is most afraid of;
     this whole site exists partly for people that mark put off English.
     The soft pair are backgrounds, the solid pair text and borders. */
  --bt-right: #158F41;
  --bt-right-soft: #E7F6EC;
  --bt-wrong: #C2410C;
  --bt-wrong-soft: #FDF0E7;
  --bt-close: #A96A24;
  --bt-close-soft: #FFF6E4;

  /* ── shape ────────────────────────────────────────────────────────── */
  --bt-radius: 22px;
  --bt-radius-sm: 14px;
  --bt-radius-pill: 999px;
  --bt-shadow: 0 6px 0 rgb(0 0 0 / 0.10);
  --bt-shadow-lift: 0 10px 24px rgb(0 0 0 / 0.12);

  /* ── space ────────────────────────────────────────────────────────── */
  --bt-s1: 0.25rem;
  --bt-s2: 0.5rem;
  --bt-s3: 0.85rem;
  --bt-s4: 1.25rem;
  --bt-s5: 2rem;

  /* Nothing tappable is ever smaller than this. A child's finger and a
     parent's thumb on a cracked screen are the two hands this is sized for. */
  --bt-tap: 44px;

  /* ── type ─────────────────────────────────────────────────────────────
     clamp() rather than breakpoints: the range from a 360px phone to a
     classroom projector is continuous and so is this. */
  --bt-font: "Baloo 2", "Noto Sans Devanagari", "Nirmala UI", "Segoe UI", system-ui, sans-serif;
  --bt-fs-prompt: clamp(1.15rem, 4.6vw, 1.5rem);
  --bt-fs-body: clamp(1rem, 3.8vw, 1.1rem);
  --bt-fs-small: clamp(0.85rem, 3.2vw, 0.95rem);
  --bt-fs-big: clamp(1.6rem, 7vw, 2.4rem);

  /* ── motion ───────────────────────────────────────────────────────── */
  --bt-t-quick: 130ms;
  --bt-t: 260ms;
  --bt-t-slow: 420ms;
  --bt-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* How long the staggered elimination waits between options. */
  --bt-stagger: 160ms;
}

/* One switch for the whole assessment layer. Every engine animates through
   these variables, so honouring the setting is not something each of the
   seventeen has to remember to do. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bt-t-quick: 1ms;
    --bt-t: 1ms;
    --bt-t-slow: 1ms;
    --bt-stagger: 1ms;
  }
}