/* ============================================
   BASE — Reset, root vars, body, typography
============================================ */

/* Parlour palette: warm cream ground, deep navy structure, one scarce deep
   orange accent. Per the visual-overhaul spec (parlour_visual_overhaul_spec.md)
   the interface itself is the composition — geometry and typography carry
   the identity, not colour variety. No gradients anywhere. */
:root {
  --bg: #F5F1E8;
  --surface: #FFFFFF;

  /* Deep navy is the one structural colour: text, headings, lines, icons,
     active/inactive geometric forms. It reads almost as black at normal
     size but keeps a clear navy cast. */
  --primary: #102A47;
  --primary-dark: #0A1D33;
  --primary-mid: #3C5570;
  /* Doubles as text on cream and as a fill under white text, so it has to
     clear 4.5:1 in both directions. Already navy-grey, so the shift to a
     deeper structural navy above didn't require moving this. */
  --secondary: #5F6B7E;

  /* Body copy is set in the same navy as headings, not a separate near-black
     — the spec treats navy as *the* text colour, not one colour among
     several. */
  --text: var(--primary);
  --muted: #5A6B80;

  /* Deep, saturated orange — the principal and only accent, meant to stay
     scarce. --accent is the vivid shape-fill version (3:1 bar, never carries
     text). --accent-dark is the same hue pulled down until it clears 4.5:1
     so it's safe under body-size text. */
  --accent: #E94B16;
  --accent-dark: #A8371C;
  --accent-bg: #FCEBE3;

  /* Reserved for destructive actions (delete/remove) — never for
     correctness, which is carried by navy/orange and shape. See spec
     section 18. Also doubles, sparingly, as the SRS "Again" rating and
     incorrect-review-answer colour — see visual identity v2. */
  --danger: #B23A22;
  --danger-bg: #FAEDE9;

  /* Reintroduced 2026-08-14 (visual identity v2) for spaced-repetition
     mastery feedback (Decks "Mastered" stat, review "¡Correcto!"
     confirmation, retention chart, SRS "Easy" rating). Widened 2026-08-19
     to the general correctness colour app-wide — lesson/driller exercises
     already used it for tap-based options (.lsn-option.correct,
     .gd-option.correct) while typed inputs, sentence-builder, feedback
     text, and the level test still used navy for the same thing with no
     functional reason. Green now means "correct" everywhere consistently;
     navy/accent-dark stays reserved for "wrong". */
  --success: #2F7A4D;
  --success-bg: #E8F3EC;

  /* Hairline structure, not warm dividers — thin navy at low opacity so it
     reads as an architectural line rather than a card boundary. */
  --border: rgba(16, 42, 71, 0.18);
  --border-light: rgba(16, 42, 71, 0.10);

  /* Added 2026-08-14 (visual identity v2) — a warm sand tone, one step
     darker than --bg, used as the second tone in two-tone illustrations
     (the unit-path art) so a shape reads against the page without needing
     a third hue. Not for text or UI chrome — decorative fill only. */
  --wash: #E7DCC3;

  /* Sharp geometry, no elevation. Briefly softened to 14px/8px with a real
     shadow on 2026-08-14, then reversed the same day: checked against the
     reference Lessons list, the identity is open rows on cream separated by
     hairlines, not a stack of lifted white cards. Small radius only where
     it earns its place; pill reserved for the rare control that needs one.
     --shadow is kept defined but deliberately unused. */
  --radius: 4px;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(16, 42, 71, .06);

  /* Titles and content headings are set in a serif; interface chrome stays
     sans. Both stacks name the brand faces first, then fall back through
     faces that ship with an OS — the app loads no webfonts, so it keeps
     working offline, never flashes unstyled text, and respects whatever font
     size the reader has set at system level.

     The serif is Source Serif 4, which is transitional rather than old-style;
     Charter (macOS) is its closest relative, and Georgia is the reliable
     everywhere fallback — drawn for screens, with a large x-height, which is
     what makes it the readable choice at body sizes. */
  --font-display: 'Source Serif 4', 'Source Serif Pro', Charter,
                  'Bitstream Charter', 'Iowan Old Style', Georgia, Cambria, serif;

  /* Inter, then the platform UI faces it was drawn to sit alongside. */
  --font-ui: Inter, 'Segoe UI Variable Text', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale — 4px base, multiples of 4/8. Existing components keep
     their hand-tuned px values; this scale is for new geometric/composition
     work so it doesn't invent its own numbers. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Animation system — short, physical, no bounce. Reused by geometric
     state transitions (styles/geometry.css) and page-level motion alike. */
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 450ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font-ui);
}

h1, h2, h3, p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
}

input {
  font: inherit;
}

/* One focus treatment for the whole app. Orange is otherwise rationed for
   active/live states, and focus is exactly that — the one control the
   keyboard is about to act on. Components with a more specific focus
   treatment (e.g. an already-orange active state) can override this. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Animations used by reader popup, XP float, etc. */

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes fadeUp {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(-10px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }
}