/* ============================================================================
   AI Homework — design system
   ----------------------------------------------------------------------------
   Direction: adventure-game UI. A lime signature colour, near-black ink,
   white cards floating on bold colour panels, big tight-tracked headings and
   characters with real dimension. Learning is framed as a quest, which happens
   to be the honest shape of this product: three guided steps to an answer the
   child reaches themselves.

   One rule the look is bent around: the reward language celebrates EFFORT, not
   speed. A tutor that awards points for reaching the answer fastest teaches
   children to guess and move on, which is the exact behaviour the three-round
   flow exists to prevent.

   Three tiers of token, so a colour is never written twice:
     1. primitive  --g-*         raw values, no meaning
     2. semantic   --color-*     purpose: surface, text, danger
     3. component  --shadow-*    scoped effects

   Colours are declared twice on purpose: a hex first, then the same colour in
   OKLCH. Browsers that understand OKLCH take the second (perceptually even
   lightness); older ones keep the hex and still get an accessible page.

   No webfont and no CDN. The rounded feel comes from the system rounded face
   where one exists, which keeps `script-src 'self'` intact, works on school
   networks that block CDNs, and avoids a Latin webfont with no Chinese glyphs.
   ========================================================================== */

:root {
  /* ── Tier 1: primitives ─────────────────────────────────────────────── */
  --g-lime:      #d4ff3f;  --g-lime:      oklch(94% 0.22 122);
  --g-lime-deep: #a8d400;  --g-lime-deep: oklch(80% 0.21 124);

  --g-ink:    #11131a;     --g-ink:    oklch(18% 0.015 265);
  --g-ink-2:  #3f4659;     --g-ink-2:  oklch(40% 0.03 265);
  --g-ink-3:  #5b6378;     --g-ink-3:  oklch(50% 0.03 265);

  --g-white:  #ffffff;
  --g-paper:  #f4f6fb;     --g-paper:  oklch(97% 0.008 265);

  --g-blue:      #3d5afe;  --g-blue:      oklch(53% 0.24 268);
  --g-blue-soft: #e6ebff;  --g-blue-soft: oklch(94% 0.03 268);
  --g-pink:      #ff4d94;  --g-pink:      oklch(66% 0.23 2);
  --g-pink-deep: #c2185b;  --g-pink-deep: oklch(52% 0.2 2);
  --g-pink-soft: #ffe6f0;  --g-pink-soft: oklch(94% 0.035 2);
  --g-teal:      #00bfa5;  --g-teal:      oklch(72% 0.14 177);
  --g-teal-deep: #00806e;  --g-teal-deep: oklch(50% 0.11 177);
  --g-teal-soft: #ddfaf4;  --g-teal-soft: oklch(95% 0.035 177);
  --g-amber:     #ffb300;  --g-amber:     oklch(80% 0.16 78);
  --g-amber-deep:#8a5a00;  --g-amber-deep:oklch(48% 0.11 70);
  --g-violet:    #7c4dff;  --g-violet:    oklch(58% 0.23 290);

  --g-red:    #d32020;     --g-red:    oklch(53% 0.2 27);

  /* ── Tier 2: semantic ───────────────────────────────────────────────── */
  --color-accent:    var(--g-lime);        /* always carries INK text */
  --color-primary:   var(--g-blue);
  --color-on-primary:var(--g-white);
  --color-danger:    var(--g-red);

  --color-bg:        var(--g-paper);
  --color-surface:   var(--g-white);
  --color-panel:     var(--g-ink);         /* the dark hero/stat panels */
  --color-on-panel:  var(--g-white);
  --color-text:      var(--g-ink);
  /* 8.4:1 on white. Secondary text is exactly where children's interfaces
     usually fail, so it is deliberately darker than a designer's instinct. */
  --color-text-soft: var(--g-ink-2);
  --color-border:    #dfe4ef;

  /* Per-subject identity, consistent across both screens so a child knows
     "their" area by colour and character before reading any word. */
  --subject-english: var(--g-blue);
  --subject-english-soft: var(--g-blue-soft);
  --subject-chinese: var(--g-pink-deep);
  --subject-chinese-soft: var(--g-pink-soft);
  --subject-malay:   var(--g-teal-deep);
  --subject-malay-soft: var(--g-teal-soft);

  /* ── Tier 3: component ──────────────────────────────────────────────── */
  --radius-sm: 14px;
  --radius:    22px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* Depth comes from layered soft shadows rather than outlines: it is what
     makes the cards read as objects floating above the panel. */
  --shadow-card:  0 1px 2px rgb(17 19 26 / 0.06),
                  0 8px 20px -6px rgb(17 19 26 / 0.14),
                  0 24px 48px -24px rgb(17 19 26 / 0.22);
  --shadow-float: 0 2px 4px rgb(17 19 26 / 0.08),
                  0 14px 30px -8px rgb(17 19 26 / 0.22),
                  0 36px 64px -28px rgb(17 19 26 / 0.3);
  --shadow-press: 0 1px 2px rgb(17 19 26 / 0.12);

  /* Accessibility floors as tokens, not numbers scattered through the CSS,
     so they cannot quietly drift apart between screens. */
  --tap: 48px;          /* above the 44px minimum, for smaller hands */
  --font-body: 16px;    /* also stops iOS zooming the page on focus */
  --focus-ring: 4px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  --font-ui:
    ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Nunito",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* CJK needs its own stack: the rounded Latin faces carry no Chinese glyphs,
     and without this Chinese drops to a mismatched serif. */
  --font-cjk:
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur:      280ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--font-body);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100dvh;
}

:lang(zh) { font-family: var(--font-cjk); }

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.05; }

/* ── Shared building blocks ──────────────────────────────────────────── */

.btn {
  font: inherit;
  font-weight: 800;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Only transform and shadow move, so nothing around a button reflows when a
   child taps it. */
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.btn:active { transform: translateY(1px) scale(0.97); box-shadow: var(--shadow-press); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-accent  { background: var(--color-accent); color: var(--color-text); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-icon    { padding: 0; width: var(--tap); height: var(--tap); border-radius: var(--radius); }

/* One focus style everywhere, never removed — a child using a keyboard or a
   switch device has to be able to see where they are. Ink ring, so it stays
   visible on lime, on white and on the dark panel alike. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring) solid var(--g-ink);
  outline-offset: 3px;
}
.panel :where(a, button, [tabindex]):focus-visible { outline-color: var(--g-lime); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

svg { display: block; flex-shrink: 0; }

/* ── Motion ──────────────────────────────────────────────────────────── */

@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes blink-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-5px); }
}
@keyframes sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%)  skewX(-18deg); }
}

/* Everything decorative stops here. The interface stays fully usable and
   legible with motion off — a setting children with vestibular sensitivity
   rely on, and a common default in school device management. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .btn, .card, .bubble, .stat { border: 1px solid CanvasText; }
}