/* 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 {
  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: #58cc02;
  --correct-lip: #46a302;
  --correct-soft: #d7ffb8;
  --correct-line: #a5ed6e;
  --correct-ink: #3b7c10;
  --line-1: #edf0f2;
  --line-2: #dce1e6;
  --lip: #d4dce0;
  --brand: #36bffa;
  --brand-lip: #0ba5ec;
  --focus-ring: #b54708;
  --brand-soft: #e0f2fe;
  --brand-soft-2: #b9e6fe;
  --brand-ink: #026aa2;
  --brand-line: #7cd4fd;
  --on-brand: #fff;
  /* Sheet primaries: a slightly deeper sky than --brand, kept as its own pair. */
  --sheet-action: #19afe8;
  --sheet-action-lip: #0a97cd;
  --m-v: #9b5cff;
  --green: #36bffa;
  --green-lip: #0ba5ec;
  --green-ink: #026aa2;
  --wrong: #d93d42;
  /* The countdown's coral red, brighter than the wrong-answer red so time reads as its own signal. */
  --countdown: #ff4b4b;
  --wrong-lip: #b52a2f;
  --wrong-soft: #fff0ee;
  --wrong-ink: #a82228;
  --wrong-line: #edb8b5;
  --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: #58cc02;
  --correct-lip: #3f8f02;
  --correct-soft: #16290a;
  --correct-line: #2f5a12;
  --correct-ink: #9be15d;
  --line-1: #1b2837;
  --line-2: #233242;
  --lip: #060b11;
  --brand: #36bffa;
  --brand-lip: #0086c9;
  --brand-soft: #0b3448;
  --brand-soft-2: #0b3049;
  --brand-ink: #7cd4fd;
  --brand-line: #065986;
  --on-brand: #fff;
  /* --green is the brand blue in both themes (pass stamps, Got it, goals met); a right answer uses --correct. */
  --green: #36bffa;
  --green-lip: #0086c9;
  --green-ink: #7cd4fd;
  --wrong: #f87171;
  --wrong-lip: #dc2626;
  --wrong-soft: #3a1a1c;
  --wrong-ink: #fda29b;
  --wrong-line: #6d2f31;
  --amber-text: #fdb022;
  --amber-soft: #33270f;
  --amber-line: #6d5322;
  --amber-ink: #fcd34d;
}