/* Colour, type and size tokens.
 *
 * The palette and typography follow 2hourlearning.com: a dominant electric
 * blue, deep navy ink, generous white, and a serif display face over a
 * geometric sans for everything else.
 *
 * The one place this app deliberately departs from that reference is the
 * correct / try-again pair. Those two colours have to be distinguishable by a
 * child who may turn out to be colourblind, so they stay teal and amber —
 * a blue-green against a yellow-orange is the one contrast that survives
 * every common form of colour vision deficiency. Red and green would not,
 * and neither would the brand's magenta against a teal. The magenta is used
 * for decoration instead, where nothing depends on telling it apart.
 */

:root {
  /* ---- brand ---- */
  --blue:          #0043ef;   /* the signature electric blue */
  --blue-dark:     #003bd3;
  --blue-bright:   #096ef7;
  --blue-pale:     #eaf0ff;
  --navy:          #03133d;
  --magenta:       #cc3366;   /* decorative accent only */

  /* ---- surfaces ---- */
  --bg:            #f7f7f8;
  --surface:       #ffffff;
  --surface-sunk:  #eef1f7;
  --border:        #dde3f0;
  --shadow:        0 1px 2px rgba(3, 19, 61, 0.06), 0 8px 20px rgba(3, 19, 61, 0.07);
  --shadow-lift:   0 2px 4px rgba(3, 19, 61, 0.08), 0 14px 32px rgba(3, 19, 61, 0.12);

  /* ---- ink ---- */
  --ink:           #03133d;
  --ink-soft:      #7e7e8f;
  --ink-invert:    #ffffff;

  /* ---- primary (aliases so component rules read plainly) ---- */
  --primary:       var(--blue);
  --primary-dark:  var(--blue-dark);
  --primary-soft:  var(--blue-pale);

  /* ---- states: teal / amber, see note above ---- */
  --correct:       #0e9e82;
  --correct-dark:  #0a7a64;
  --correct-soft:  #d7f3ec;
  --retry:         #e08a12;
  --retry-dark:    #a9660a;
  --retry-soft:    #fdefd9;

  /* ---- manipulatives ----
     Anything the child has to *compare* uses --counter-a against --counter-b,
     the blue/amber pair. Magenta is only ever a third, decorative group. */
  --counter-a:     var(--blue);
  --counter-b:     #f0a11c;
  --counter-c:     var(--magenta);

  /* ---- sizing: nothing interactive is ever smaller than --tap-min ---- */
  --tap-min:       64px;
  --key:           92px;
  --radius:        18px;
  --radius-sm:     12px;
  --radius-pill:   999px;

  /* ---- type ---- */
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font:         var(--font-ui);

  --numeral-size: clamp(3rem, 9vw, 5.5rem);
  --prompt-size:  clamp(1.4rem, 3vw, 2.1rem);

  /* Manipulative sizing, shared so everything shrinks together. */
  --tf-cell:       54px;   /* one ten-frame cell */
  --strip-unit:    30px;   /* one square of a discrete strip */
  --counter-size:  48px;   /* a counter he looks at, not one he taps */
  --measure-unit:  30px;   /* one unit of length on the ruler */
}

/* iPad portrait: two rows of nine counters plus the number pad was just over
   a screen height. */
@media (max-height: 1100px) { :root { --counter-size: 44px; } }

/* The number pad is the tallest fixed block on screen and the ten-frames are
   the widest, so those two decide whether a layout fits. Both shrink as the
   viewport gets shorter — the pad never below --tap-min, which stays
   comfortably above a child's finger. */
@media (max-height: 900px) { :root { --key: 82px; } }

@media (max-height: 820px) {
  :root { --key: 74px; --tf-cell: 46px; --strip-unit: 26px; --counter-size: 42px; --measure-unit: 26px; }
}

@media (max-height: 740px) {
  :root { --key: 68px; --tf-cell: 42px; --strip-unit: 24px; --counter-size: 38px; --measure-unit: 24px; }
}

@media (max-height: 660px) {
  :root {
    --key: 64px;
    --tf-cell: 38px;
    --strip-unit: 22px;
    --counter-size: 34px;
    --measure-unit: 22px;
    --numeral-size: clamp(2.4rem, 7vw, 4rem);
  }
}

/* ---- phones ----
   A phone is roughly half the width of an iPad, which the height-based tiers
   above cannot help with: two ten-frames side by side are ~560px and a phone
   is ~390px. Everything gets smaller here, and main.css additionally stacks
   what used to sit side by side.

   --tap-min drops to 56px, still comfortably above Apple's 44px minimum. */
@media (max-width: 560px) {
  :root {
    --tap-min:       56px;
    --key:           64px;
    --tf-cell:       38px;
    --strip-unit:    16px;
    --counter-size:  26px;
    --measure-unit:  22px;
    --numeral-size:  clamp(2.2rem, 11vw, 3rem);
    --prompt-size:   clamp(1.05rem, 4.6vw, 1.4rem);
  }
}

/* Small phones (an iPhone SE is 375x667). Once the number pad, a prompt and
   an answer box are on screen there is barely 140px left for the
   manipulative, so this tier goes further than the one above. */
@media (max-width: 560px) and (max-height: 700px) {
  :root {
    --key:           56px;
    --tf-cell:       30px;
    --counter-size:  22px;
    --strip-unit:    14px;
    --measure-unit:  19px;
    --numeral-size:  clamp(1.9rem, 9vw, 2.5rem);
    --prompt-size:   clamp(1rem, 4.2vw, 1.2rem);
  }
}

/* Phone held sideways: ~390px of height for everything. */
@media (max-height: 470px) {
  :root {
    --tap-min:       52px;
    --key:           54px;
    --tf-cell:       30px;
    --strip-unit:    14px;
    --counter-size:  22px;
    --measure-unit:  19px;
    --numeral-size:  clamp(1.8rem, 6vw, 2.6rem);
    --prompt-size:   clamp(1rem, 2.6vw, 1.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --anim: 0ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}