/* ==========================================================================
   Math Memory — design tokens
   Values taken verbatim from the "Math Memory" design handoff spec.
   Colour marks the ROLE of a symbol, never the times table.
   ========================================================================== */

:root {
  /* --- Equation colour tokens ------------------------------------------ */
  --eq-first:   #ff3d8b;
  --eq-op:      #ff8a2b;
  --eq-second:  #1e8fff;
  --eq-equals:  #12b06c;
  --eq-answer:  #8b3dff;

  /* --- Card surfaces ---------------------------------------------------- */
  --card-front:    #fffdf6;
  --card-front-2:  #fff2dc;
  --card-back:     #4a1fb0;
  --card-back-2:   #6a3ce0;

  /* --- Primary call to action ------------------------------------------- */
  --cta:         #ffab1d;
  --cta-2:       #ffd06a;
  --cta-shadow:  #d07f00;

  /* --- App background --------------------------------------------------- */
  --bg-1: #3a1c7d;
  --bg-2: #241056;
  --bg-3: #1b0c46;
  --app-bg: linear-gradient(170deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);

  /* --- Site (marketing) surfaces ---------------------------------------- */
  --paper:      #efece5;
  --panel:      #ffffff;
  --panel-line: rgba(0, 0, 0, .08);

  /* --- Accents ---------------------------------------------------------- */
  --gold:       #ffd76a;
  --amber:      #ffb62e;
  --teal:       #34d1c0;
  --teal-2:     #4fe3d0;
  --teal-3:     #1fb5a4;
  --teal-deep:  #0d8073;
  --pink:       #ff85b9;
  --pink-soft:  #ffbcd8;
  --pink-deep:  #7a2145;
  --green:      #12b06c;
  --green-soft: #5cf0ae;
  --green-deep: #128a5b;
  --violet:     #8b3dff;
  --indigo:     #5b3ad6;

  /* --- Ink -------------------------------------------------------------- */
  --ink:      #1a1430;
  --ink-2:    #2a1350;
  --muted:    #55506b;
  --muted-2:  #8b8798;

  /* --- Translucent layers used across the dark app ---------------------- */
  --sheer-1: rgba(255, 255, 255, .09);
  --sheer-2: rgba(255, 255, 255, .11);
  --sheer-3: rgba(255, 255, 255, .14);
  --well:    rgba(0, 0, 0, .28);

  /* --- Spacing scale: 4 / 8 / 12 / 16 / 22 / 28 ------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 28px;

  /* --- Radii: card 20 · tile 18-22 · sheet 32 · pill 999 ---------------- */
  --r-card:  20px;
  --r-tile:  20px;
  --r-chip:  14px;
  --r-sheet: 32px;
  --r-pill:  999px;

  /* Minimum tap target */
  --tap: 48px;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-ui:      'Nunito', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Shared keyframes (names kept from the prototype)
   ========================================================================== */

@keyframes mmwobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-6px) rotate(-4deg); }
  45%      { transform: translateX(6px) rotate(4deg); }
  70%      { transform: translateX(-4px) rotate(-2deg); }
}
@keyframes mmpop {
  0%   { transform: scale(.7);   opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes mmjump {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  60%      { transform: translateY(-3px); }
}
@keyframes mmfloat {
  0%   { transform: translateY(0);     opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}
@keyframes mmconf {
  0%   { transform: translate(0, 0) rotate(0);                    opacity: 1; }
  100% { transform: translate(var(--dx, 20px), 120px) rotate(320deg); opacity: 0; }
}
@keyframes mmbob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes mmpulse {
  0%, 100% { box-shadow: 0 0 0 0  rgba(255, 215, 106, .55); }
  70%      { box-shadow: 0 0 0 18px rgba(255, 215, 106, 0); }
}
@keyframes mmshimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes mmfadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   The equation — the one component both the site and the app share
   ========================================================================== */

.eq {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: var(--eq-gap, 4px);
  white-space: nowrap;
}
.eq__a      { color: var(--eq-first); }
.eq__op     { color: var(--eq-op); }
.eq__b      { color: var(--eq-second); }
.eq__equals { color: var(--eq-equals); }
.eq__ans    { color: var(--eq-answer); }

/* Visually hidden, but still read out. Used for the quiz's live region and
   for headings that exist for structure rather than for the eye. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}