/* ============================================================
   QUIET HUB — PLATFORM THEME
   The single source of truth for colour across the whole platform.
   Every screen and every game imports this and uses the variables —
   never hard-coded colours. Change a value here, it changes everywhere.

   Usage in any game/page:
     <link rel="stylesheet" href="platform-theme.css">
     body { background: var(--paper); color: var(--ink); }
   ============================================================ */

:root {
  /* ---- The page (Paperwhite) ---------------------------------
     A warm, low-glare e-reader page. This is THE platform
     background — the hub, every game, every screen sits on it. */
  --paper:    #F6F3EA;   /* platform background                  */
  --panel:    #FCFAF4;   /* cards, boards, raised surfaces       */
  --raised:   #FFFFFF;   /* rare: needs to sit above --panel     */

  /* ---- Ink & lines ------------------------------------------ */
  --ink:      #2B2A25;   /* primary text                          */
  --soft:     #5F5B50;   /* secondary text, labels                */
  --faint:    #A79E88;   /* hints, disabled, fine print           */
  --line:     #C9BFA4;   /* borders, dividers                     */

  /* ---- Functional accents ------------------------------------
     Each colour has ONE fixed job across the whole platform, so
     children learn that colour means something. Never decorative,
     never a reward. */
  --sage:     #5E7E4F;   /* correct · complete · in place         */
  --slate:    #42658A;   /* next step · current target            */
  --clay:     #A85E33;   /* letters · placed letter               */
  --blue:     #3D6DA8;   /* numbers · chosen number               */

  /* ---- Game surfaces ----------------------------------------- */
  --covered:   #D8CDB0;  /* un-revealed square (e.g. Meadow grass)*/
  --covered-2: #D1C5A6;  /* alternate shade for a soft chequer    */
  --dug:       #FCFAF4;  /* revealed / cleared square             */

  /* ---- Number colours (grid games) ---------------------------
     Strong and distinct so a child can read them at a glance. */
  --n1: #2F6FB0;  --n2: #4C7A3A;  --n3: #B4552A;  --n4: #3B4F86;
  --n5: #8C3A3A;  --n6: #2F7C7C;  --n7: #4A463C;  --n8: #1F1E1A;

  /* ---- Shape & spacing --------------------------------------- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 18px;
  --pad:  16px;
  --touch-min: 44px;     /* minimum touch target for small fingers */

  /* ---- Type --------------------------------------------------- */
  --font: "Segoe UI", Helvetica, Arial, sans-serif;
  --t-title: 19px;  --t-body: 14px;  --t-small: 12.5px;
}

/* ---- Base ---------------------------------------------------- */
body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
}

/* ---- Shared components --------------------------------------- */
.qh-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--pad);
}

.qh-btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--soft);
  border-radius: var(--r-md);
  padding: 8px 15px;
  font-size: var(--t-body);
  font-family: var(--font);
  cursor: pointer;
  min-height: var(--touch-min);
}
.qh-btn:active { background: var(--line); }

/* selected / active state */
.qh-btn.is-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* success message — the only "well done", quiet and plain */
.qh-done { color: var(--sage); font-weight: 600; }
/* calm end of round — never a punishment */
.qh-end  { color: var(--clay); font-weight: 600; }

/* screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}

/* ============================================================
   RULES
   1. No hard-coded colours in a game — use the variables above.
   2. Accents keep their fixed meaning everywhere. Don't reuse
      --sage for decoration; it means "correct".
   3. Nothing here rewards. No golds, no glitter, no celebration.
   ============================================================ */