/* theme.css — The design tokens in effect, light and dark. Light: white
   surfaces, navy type, sky-blue actions, 1.5px strokes and a 4px solid lip.
   Dark: the same palette on navy surfaces. */
:root {
  /* Contact points measured from the waving and trophy artwork. */
  --mascot-wave-ground-x: 49.5%;
  --mascot-wave-ground-y: 92%;
  --mascot-wave-ground-width: 39%;
  --mascot-trophy-ground-x: 49.5%;
  --mascot-trophy-ground-y: 92.2%;
  --mascot-trophy-ground-width: 40%;
  color-scheme: light;
  --paper: #fff;
  --panel: #f8fbfd;
  --panel-2: #f0f5f9;
  --ink: #404b60;
  --ink-2: #5c6980;
  --ink-3: #6e7b91;
  --disabled: #d5dbe1;
  /* Icon-only header buttons (Preferences, the feed filter): the lightest grey that keeps 3:1 against the page. */
  --icon-quiet: #8793a2;
  /* A right answer is green: its own tokens, because --green was repainted in
     brand blue when the brand moved to sky blue and still carries that elsewhere. */
  --correct: #40cd0f;
  --correct-lip: #33a50d;
  --correct-soft: #dcfcd0;
  --correct-line: #a9ea91;
  --correct-ink: #307d18;
  --line-1: #edf0f2;
  --line-2: #dce1e6;
  --lip: #d4dce0;
  --brand: #d52b3a;
  --brand-lip: #ad1e2e;
  --focus-ring: #b54708;
  --brand-soft: #fff0f1;
  --brand-soft-2: #ffd3d8;
  --brand-ink: #9d1627;
  --brand-line: #f5a0aa;
  --on-brand: #fff;
  /* Sheet primaries: a slightly deeper sky than --brand, kept as its own pair. */
  --sheet-action: #d52b3a;
  --sheet-action-lip: #ad1e2e;
  --m-v: #9b5cff;
  --green: #d52b3a;
  --green-lip: #ad1e2e;
  --green-ink: #9d1627;
  --wrong: #ba4b15;
  /* The countdown's coral red, brighter than the wrong-answer red so time reads as its own signal. */
  --countdown: #fa5340;
  --wrong-lip: #943510;
  --wrong-soft: #fff3e9;
  --wrong-ink: #87380f;
  --wrong-line: #efc2a4;
  --amber-text: #d97706;
  --amber-soft: #fef3c7;
  --amber-line: #fde68a;
  --amber-ink: #92400e;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 16px;
  --drop: 0 4px 0;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --sans:
    "Nunito", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI",
    sans-serif;
}
/* Dark: navy surfaces, the same sky-blue actions. Tokens named above and omitted
   here keep their light values. html[data-theme] is set before first paint. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1520;
  --panel: #131e2b;
  --panel-2: #1b2837;
  --ink: #f0f5fa;
  --ink-2: #a3b0bf;
  --ink-3: #8b98a8;
  --disabled: #3a4756;
  --icon-quiet: #8b98a8;
  --focus-ring: #fdb022;
  --correct: #40cd0f;
  --correct-lip: #2f900b;
  --correct-soft: #132a0d;
  --correct-line: #275b18;
  --correct-ink: #9ce07f;
  --line-1: #1b2837;
  --line-2: #233242;
  --lip: #060b11;
  --brand: #d52b3a;
  --brand-lip: #ad1e2e;
  --brand-soft: #3c1721;
  --brand-soft-2: #361820;
  --brand-ink: #f5a0aa;
  --brand-line: #8b2435;
  --on-brand: #fff;
  /* --green is the brand blue in both themes (pass stamps, Got it, goals met); a right answer uses --correct. */
  --green: #d52b3a;
  --green-lip: #ad1e2e;
  --green-ink: #f5a0aa;
  --wrong: #fb923c;
  --wrong-lip: #c2410c;
  --wrong-soft: #3a2210;
  --wrong-ink: #fdba74;
  --wrong-line: #6d3d1c;
  --amber-text: #fdb022;
  --amber-soft: #33270f;
  --amber-line: #6d5322;
  --amber-ink: #fcd34d;
}