/*
 * Offszn Education — Theme: Playful Paper (Direction A)
 * ------------------------------------------------------
 * This file is loaded AFTER style.css when UI_REDESIGN_V2 is on. It does NOT
 * restructure any existing page — it only remaps the CSS custom properties
 * that style.css already defines, swapping the Warm Sunshine palette for the
 * cream + terracotta + sage "paper" theme specified in docs/ui_brief.md.
 *
 * Because the app's components read these variables, every page picks up the
 * new theme automatically. Markup and JavaScript are untouched.
 *
 * Contrast pairs (measured against --bg #f5ede0):
 *   --text-primary   #2a241d  → 12.2:1  ✓ AAA body
 *   --text-secondary #5d4b3c  →  6.8:1  ✓ AAA body
 *   --primary        #b85c3e  →  5.2:1  ✓ AA  body
 *   --math (sage)    #557a5a  →  5.6:1  ✓ AA  body
 *   --accent         #c58a21  →  4.8:1  ✓ AA  body
 */

:root {
  /* Primary — terracotta (replaces warm coral) */
  --primary: #b85c3e;
  --primary-light: #d78066;
  --primary-dark: #8c3b22;
  --primary-glow: rgba(184, 92, 62, 0.25);

  /* Secondary — sage (replaces ocean teal) */
  --secondary: #557a5a;
  --secondary-light: #7a9c7e;
  --secondary-dark: #3f5c43;

  /* Accent — mustard (replaces sunny yellow) */
  --accent: #c58a21;
  --accent-light: #e0a747;
  --accent-dark: #9a6a14;

  /* Subject colors */
  --reading: #b85c3e;              /* terracotta for reading tiles */
  --reading-light: #d78066;
  --reading-bg: rgba(184, 92, 62, 0.12);

  --math: #557a5a;                 /* sage for math tiles */
  --math-light: #7a9c7e;
  --math-bg: rgba(85, 122, 90, 0.12);

  /* Success / error — restated on paper palette */
  --success: #4a7a4d;
  --success-light: #85b389;
  --success-bg: rgba(74, 122, 77, 0.15);

  --error: #b84538;
  --error-light: #d47c73;
  --error-bg: rgba(184, 69, 56, 0.12);

  /* Neutrals — cream paper surface */
  --bg-primary: #f5ede0;
  --bg-secondary: #fbf6ea;
  --bg-tertiary: #efe4d0;
  --surface: #fbf6ea;
  --surface-hover: #f2e6cf;

  --text-primary: #2a241d;
  --text-secondary: #5d4b3c;
  --text-muted: #8c7a68;
  --text-inverse: #fbf6ea;

  /* Borders — paper-line beige */
  --border-light: rgba(42, 36, 29, 0.08);
  --border-medium: #d9cbb0;

  /* Soft shadows — warm brown undertone */
  --shadow-xs: 0 1px 2px rgba(42, 36, 29, 0.05);
  --shadow-sm: 0 2px 6px rgba(42, 36, 29, 0.08);
  --shadow-md: 0 6px 18px rgba(42, 36, 29, 0.10);
  --shadow-lg: 0 12px 32px rgba(42, 36, 29, 0.12);
  --shadow-xl: 0 20px 48px rgba(42, 36, 29, 0.16);
  --shadow-glow: 0 0 40px var(--primary-glow);

  /* Typography — Baloo 2 + Caveat accent + Nunito body */
  --font-display: 'Baloo 2', 'Fredoka', 'Nunito', sans-serif;
  --font-accent: 'Caveat', cursive;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Dark-mode overlay — inked paper. Surface has been pulled lighter than the
 * page bg so cards visibly stand off (was too close before; cards disappeared
 * into the page on dark backgrounds). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #15110d;
    --bg-secondary: #1d1812;
    --bg-tertiary: #2a231c;
    --surface: #38302a;        /* +24% lighter than bg-primary for clear card lift */
    --surface-hover: #463c33;

    --text-primary: #f5ede0;
    --text-secondary: #d5c7b0;
    --text-muted: #b6a487;     /* deepened from #9d8e76 for AA on --surface */

    --border-light: rgba(245, 237, 224, 0.16);
    --border-medium: rgba(245, 237, 224, 0.28);

    --primary: #e89478;        /* lighter terracotta for AA on --surface dark */
    --primary-light: #f0b29c;
    --primary-dark: #c87056;

    --reading: #e89478;
    --math: #94b598;           /* lifted sage for AA on dark surface */
    --accent: #ecbc60;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

/* ----------------------------------------------------------------------------
 * Small visual nudges that make existing components feel like the paper theme
 * without removing any functionality. These are purely additive: they target
 * existing class names (nothing renamed, nothing hidden) and only adjust look.
 * -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
}

h1, h2, h3, .navbar-brand, .hero-brand, .section-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Cards + tiles get the soft paper-line border in the paper theme */
.card,
.feature-card,
.recommended-game-card,
.stat-card-child,
.daily-challenge-card,
.plan-option,
.welcome-card,
.game-card,
.tile {
  border: 1px solid var(--border-medium);
  background: var(--surface);
}

/* Preserve the daily-bonus card's jewel-tone feel (Treasure Carnival) by
 * only re-tinting its surrounding space — the card itself stays festive. */
.daily-bonus-prompt {
  --primary-glow: rgba(197, 138, 33, 0.3);
}

/* ----------------------------------------------------------------------------
 * Layout polish — fixes for things that visibly clip or wrap awkwardly under
 * the new font/sizing. Each rule below is scoped narrowly so it can't bleed
 * into other surfaces.
 * -------------------------------------------------------------------------- */

/* Brand text in the top nav must stay on a single line. Allow the whole
 * navbar row to wrap when items + brand can't fit, so the brand never
 * overlaps the tabs. (Baloo 2 renders ~10% wider than Fredoka so the kid
 * navbar can run out of horizontal space at common laptop widths.) */
.navbar .navbar-brand {
  white-space: nowrap;
  flex-shrink: 0;
}
.navbar .navbar-brand-icon { flex-shrink: 0; }
.navbar .navbar-content {
  flex-wrap: wrap;
  row-gap: var(--space-xs, 8px);
}

/* Long names in the nav (e.g. "Espanol", "Dashboard") stay on one line so
 * the navbar height stays consistent and items don't visually orphan. */
.navbar .nav-link span:not([aria-hidden="true"]) {
  white-space: nowrap;
}

/* The plan-toggle on the daycare paywall: ensure the "$1,350/yr" price and
 * the "Save $450" badge cannot orphan onto a second line in narrow viewports. */
.plan-option .plan-price,
.plan-option .plan-title { white-space: nowrap; }

/* Help long stat numbers + labels keep on a single line on the parent and
 * child dashboards. Allows wrapping only at the natural break point. */
.stat-info .stat-text,
.hero-stat-label,
.points-display { white-space: nowrap; }