/* ============================================================================
   TopClass Kids — DESIGN TOKENS
   ----------------------------------------------------------------------------
   THE ONLY PLACE COLOURS AND SIZES ARE DEFINED.

   Claude Code: restyle freely here and in app.css. Two rules that must hold:

     1. --mango is the ACTION colour and nothing else. Every mango pixel is a
        button. If mango appears on a decorative element, that is a bug.
     2. No hex literal may appear outside this file.
============================================================================ */
:root{
  /* brand */
  --royal:#1E5AA8;  --ink:#2B2B2B;   --cream:#FFF8EC;  --mango:#FFB100;
  --coral:#E63946;  --mint:#7ABF7A;  --sand:#F4A261;   --sky:#EAF4FB;

  /* accessible text variants — verify with a real contrast checker */
  --mint-text:#B4E0B4;
  --mango-text:#FFD666;

  /* figure palette. Deliberately separate from brand tokens: these are game
     pieces, not interface. Six values, all distinguishable at small size. */
  --fig-royal:#1E5AA8;
  --fig-mint:#4E9B52;
  --fig-coral:#D32F2F;
  --fig-sand:#E08A2E;
  --fig-plum:#7E4A8C;
  --fig-teal:#1F7A82;

  /* spacing, 8px base */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:2.5rem; --s6:3rem;

  /* radius — kept small on purpose; large soft rounding everywhere is a tell */
  --r-sm:6px; --r-md:12px; --r-pill:999px;

  --ease:cubic-bezier(.16,1,.3,1);

  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}