/* Climbing With Phonics — shared design tokens (hub L8).
 * Every HTML mockup links this file; it later moves into the real app.
 * Source: docs/design/STUDENT_DESIGN_SYSTEM.md (PR 17).
 * Values marked PROPOSED are not yet confirmed by Bruce (hub P1/P2, X7/Q11). */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;600;700&display=swap");

:root {
  /* Brand (current app teal) */
  --cwp-teal: #2f6f65;          /* app / hear / Play */
  --cwp-teal-dark: #21524b;     /* pressed shadow, headings */
  --cwp-teal-pale: #dcefeb;     /* PROPOSED: app's-turn pill */
  /* Kid accent */
  --cwp-orange: #f08a24;        /* CONFIRMED 2026-10-23 (Bruce): Next, when it can be pressed. Dark text on this orange — white is about 2.5:1, under WCAG AA 3:1 for large text. Child's-turn use is still open (X7/Q11). */
  --cwp-orange-dark: #c96d12;   /* PROPOSED */
  /* Feedback (PROPOSED) */
  --cwp-correct: #2e9d5b;       /* green = earned only */
  --cwp-try-again: #7c5cc4;     /* purple, never red, never X */
  --cwp-stop: #8a8f93;          /* grey Stop */
  /* Surfaces */
  --cwp-bg: #fbf6ec;            /* cream page */
  --cwp-card: #ffffff;
  --cwp-ink: #1f2a2e;

  /* Type: Lexend only in student scope */
  --cwp-font: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  --cwp-text-min: 18px;         /* nothing on a student screen smaller */
  --cwp-text-label: 18px;
  --cwp-text-cue: 34px;
  --cwp-text-target: 300px;     /* target letters/words 220-400px */

  /* Sizes & spacing (PROPOSED) */
  --cwp-btn-size: 104px;        /* min 88px */
  --cwp-btn-min: 88px;
  --cwp-btn-radius: 26px;
  --cwp-btn-icon: 44px;
  --cwp-btn-shadow: 5px;
  --cwp-card-radius: 28px;
  --cwp-page-margin: 28px;
  --cwp-gap: 16px;
  --cwp-bar-height: 136px;
  --cwp-top-strip: 64px;
  --cwp-disabled-opacity: .35;  /* CONFIRMED 2026-10-23 (Bruce): a Next that cannot be pressed stays at this opacity, in place, never hidden */
}

/* Buttons: raised, solid, press-down (PROPOSED, hub P1) */
.kid-btn {
  width: var(--cwp-btn-size); height: var(--cwp-btn-size);
  border: 0; border-radius: var(--cwp-btn-radius);
  background: var(--cwp-teal); color: #fff;
  font: 600 var(--cwp-text-label)/1 var(--cwp-font);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 var(--cwp-btn-shadow) 0 var(--cwp-teal-dark);
  cursor: pointer;
}
.kid-btn:active { transform: translateY(var(--cwp-btn-shadow)); box-shadow: none; }
.kid-btn:disabled { opacity: var(--cwp-disabled-opacity); }
.kid-btn--go { background: var(--cwp-orange); color: var(--cwp-ink); box-shadow: 0 var(--cwp-btn-shadow) 0 var(--cwp-orange-dark); }
.kid-btn--grey { background: var(--cwp-stop); box-shadow: 0 var(--cwp-btn-shadow) 0 #5f6467; }
.kid-btn--outline { background: #fff; color: var(--cwp-teal); outline: 3px solid var(--cwp-teal); outline-offset: -3px; }

/* Messages: flat, no shadow, never look tappable */
.cue-pill { border-radius: 999px; padding: 14px 28px; font: 700 var(--cwp-text-cue)/1.1 var(--cwp-font); box-shadow: none; }
.cue-pill--app { background: var(--cwp-teal-pale); color: var(--cwp-teal-dark); }
.cue-pill--child { background: var(--cwp-orange); color: #fff; }
.cue-pill--correct { background: var(--cwp-correct); color: #fff; }
.cue-pill--try { background: var(--cwp-try-again); color: #fff; }

/* ===== PROPOSAL (2026-10-19, Grok Bot / CWP Design): word-box colours =====
 * NEW variables only. Nothing above is changed. Not live until Bruce picks (WB-40..WB-47).
 * Source: docs/design/word-box-colors/WORD_BOX_COLORS.md
 */
:root {
  --wb-stage: #fffdf8;          /* warm white word box (BDA: light, not pure white) */
  --wb-ink: #1f2a2e;            /* = --cwp-ink; one ink for every letter; retire #000 / #2c3e50 / #1f2937 */
  --wb-baseline: #3a4a66;       /* Bruce's line along the word */
  --wb-listen: #2f6f65;         /* = --cwp-teal; underline sweep while the app says a sound */
  --wb-listen-pale: #dcefeb;    /* = --cwp-teal-pale; the sound box being voiced */
  --wb-turn: #d9730d;           /* child's-turn ring and active slot (3.2:1; --cwp-orange #f08a24 is only 2.5:1) */
  --wb-correct: #1e7a46;        /* earned only: letters + ring (5.3:1) */
  --wb-correct-pale: #e3f4e8;
  --wb-try: #6d4fc2;            /* try again: DASHED outline, never on the letters */
  --wb-try-pale: #efeafb;
  --wb-wrong-letter: #b9aedb;   /* a wrong typed letter while it fades out (~0.6 s) */
  --wb-teach: #166b86;          /* modelled / revealed answer (Dorothy: teaching teal) */
  --wb-silence: #6b7683;        /* didn't hear: DOTTED ring, never purple */
  --wb-stopped: #7b8287;        /* letters while stopped */
  --wb-box: #7d8a99;            /* sound-box border (3.5:1; today's #cbd5e1 is 1.5:1) */
  --wb-vowel: #c0392b;          /* vowel underline in teaching splits only (OG); never used for errors */
  --wb-silent: #8a8f93;         /* silent e */
  --wb-star: #f2b705;           /* star decoration */
  --wb-ring-width: 8px;
  --wb-wrong-fade-ms: 600;
}
/* ===== END PROPOSAL ===== */