/* tokens.css — the ONE source of every colour, radius and size (DESIGN.md "Look"). Nothing else types a hex. */
:root {
  --navy: #1B1E53;          /* the night sky and the arena */
  --navy-deep: #10123A;
  --navy-soft: #2A2F78;
  --navy-line: #3A3F8F;
  --red: #D92027;           /* PLAY, the kid's team */
  --red-deep: #9E1219;
  --orange: #FF8A3D;        /* the ball, Swish */
  --orange-deep: #C4561A;
  --yellow: #FFC93C;        /* coins, stars */
  --yellow-deep: #B8860B;
  --blue: #3DB2FF;
  --blue-deep: #1672B8;
  --green: #2FD37F;
  --green-deep: #138A4E;
  --grape: #8C6CFF;
  --grape-deep: #5438C4;
  --wood: #E9B872;          /* the court floor */
  --wood-deep: #B98242;
  --wood-line: #F7E3BF;
  --chalk: #FFFFFF;
  --ink: #1B1E53;           /* text on light cards is the navy, never black */
  --ink-soft: #4B4F86;
  --paper: #FFFDF7;
  --paper-2: #FFF4DE;
  --shade: rgba(16, 18, 58, 0.72);

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --press: 6px;             /* how far a chunky button sits up before it is pressed */
  --gutter: 16px;
  --maxw: 560px;
  --tap: 64px;              /* grade 4 tap target (64px minimum, both grades) */
  --font: ui-rounded, "Nunito", "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --q-size: 1.45rem;
  --opt-size: 1.5rem;
}
html[data-grade="1"] {
  --tap: 76px;              /* grade 1: bigger everything */
  --q-size: 1.7rem;
  --opt-size: 2rem;
}