/* ==========================================================================
   OgbonMath — Warm Study Hall Design Tokens
   --------------------------------------------------------------------------
   Load AFTER styles.css. Redefines existing theme variables with the new
   palette; introduces new semantic tokens for dialogs, spacing, z-index,
   and typography (type ramp lives in typography.css).

   Design intent: lamp-lit library. Warm paper in light mode, warm charcoal
   in dark mode. One terracotta accent. Lime green is archived to "spark"
   status — celebrations only.
   ========================================================================== */

:root {
  /* ---------- Spacing scale (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Radius scale ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Backward-compat aliases (existing styles.css uses --rad / --rad-lg) */
  --rad: var(--radius-md);
  --rad-lg: var(--radius-lg);

  /* ---------- Z-index scale (documented ladder) ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-bottom-nav: 300;
  --z-sidebar: 400;
  --z-backdrop: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --z-splash: 900;
  --z-celebration: 1000; /* confetti, level-up flashes */

  /* ---------- Motion (unchanged — your existing easing is good) ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-calm: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* NEW: subtle, study-hall */
  --active-scale: 0.97;
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;

  /* ---------- Warm shadow system (study-hall: softer, warmer) ---------- */
  /* Shadows in warm theme get a subtle warm tint instead of pure black */
  --shadow-xs: 0 1px 2px rgba(58, 42, 28, 0.06);
  --shadow-sm: 0 2px 6px rgba(58, 42, 28, 0.08);
  --shadow:    0 4px 16px rgba(58, 42, 28, 0.10), 0 1px 3px rgba(58, 42, 28, 0.06);
  --shadow-lg: 0 8px 30px rgba(58, 42, 28, 0.12), 0 2px 8px rgba(58, 42, 28, 0.06);
  --shadow-xl: 0 16px 50px rgba(58, 42, 28, 0.16), 0 4px 12px rgba(58, 42, 28, 0.08);

  /* ---------- Reserved "spark" color — celebrations only ---------- */
  --spark: #c8ff00; /* ONLY use for XP gains, level-ups, confetti accents */
}

/* ==========================================================================
   LIGHT THEME — "Book Paper"
   ==========================================================================
   A warm off-white paper base, deep warm-charcoal text, and terracotta
   accent. Reads like a well-printed textbook under daylight.
*/
[data-theme="light"] {
  /* Surfaces — layered paper tones */
  --bg: #FAF7F0;           /* page: warm off-white */
  --bg2: #F4EFE2;          /* card: one shade down */
  --bg3: #E9E1CE;          /* elevated / hover */
  --bg4: #D9CEB5;          /* card border fill */
  --bg5: #B8AD95;          /* deep surface */

  /* Text — warm charcoal family
     WCAG AA contrast verified on both --bg and --bg2:
       --tx  (#2A2520) ≈ 13.5:1   AAA
       --tx1 (#4D4640) ≈  8.9:1   AAA
       --tx2 (#7A7269) ≈  4.7:1   AA  (borderline; do not darken bg)
       --tx3 (#6F6450) ≈  5.4:1   AA  (was #A39A8E — 2.7:1, FAILED) */
  --tx: #2A2520;           /* primary reading text */
  --tx1: #4D4640;          /* secondary */
  --tx2: #7A7269;          /* tertiary / labels */
  --tx3: #6F6450;          /* placeholder / muted — a11y: AA contrast */

  /* Borders */
  --bdr: #E0D8C4;          /* subtle divider */
  --bdr2: #B8AD95;         /* stronger edge */

  /* Accent — warm terracotta */
  --ac: #B8522F;
  --ac2: #D16A44;
  --ac-tx: #FAF7F0;        /* text ON accent (for buttons) */
  --ac-soft: rgba(184, 82, 47, 0.08);   /* background tint for selected/hover */
  --ac-ring: rgba(184, 82, 47, 0.20);   /* focus ring halo */

  --ac-sh: var(--shadow);
  --ac-sh-sm: var(--shadow-sm);

  /* Semantic status — muted earth tones */
  --gn: #5E7A4F;
  --gn-bg: rgba(94, 122, 79, 0.10);
  --gn-bdr: #5E7A4F;
  --rd: #A14B3F;
  --rd-bg: rgba(161, 75, 63, 0.08);
  --rd-bdr: #A14B3F;
  --yl: #C7903A;
  --cy: #4A7A8A;
  --or: #C66A1A;

  --card-sh: var(--shadow);
  --card-sh-sm: var(--shadow-sm);
  --hover-bg: rgba(58, 42, 28, 0.05);

  /* Backdrop (modal overlay) — warm film, not pure black */
  --backdrop: rgba(42, 37, 32, 0.40);
}

/* ==========================================================================
   DARK THEME — "Lamp-Lit Study"
   ==========================================================================
   Warm near-black base (not #000), cream text (not #fff), brighter
   terracotta calibrated to pop on the warm dark background.
*/
[data-theme="dark"] {
  /* Surfaces — warm charcoal layers */
  --bg: #1A1815;           /* page: warm near-black */
  --bg2: #232018;          /* card */
  --bg3: #2D2921;          /* elevated / hover */
  --bg4: #3A352B;          /* border fill */
  --bg5: #544E3F;          /* deep surface */

  /* Text — warm cream family
     WCAG AA contrast verified on both --bg and --bg2:
       --tx  ≈ 14:1  AAA
       --tx1 ≈ 11:1  AAA
       --tx2 ≈  6:1  AA
       --tx3 (#9A8F7A) ≈ 5.1:1 AA (was #7A7160 — 3.7:1, FAILED) */
  --tx: #F5F0E4;
  --tx1: #DDD5C3;
  --tx2: #A39988;
  --tx3: #9A8F7A;          /* a11y: AA contrast (raised from #7A7160) */

  /* Borders */
  --bdr: #3A352B;
  --bdr2: #544E3F;

  /* Accent — brighter terracotta for dark */
  --ac: #E87B4E;
  --ac2: #F29670;
  --ac-tx: #1A1815;
  --ac-soft: rgba(232, 123, 78, 0.12);
  --ac-ring: rgba(232, 123, 78, 0.28);

  --ac-sh: var(--shadow);
  --ac-sh-sm: var(--shadow-sm);

  /* Semantic status — softer dark-mode earth tones */
  --gn: #8FAF7C;
  --gn-bg: rgba(143, 175, 124, 0.12);
  --gn-bdr: #8FAF7C;
  --rd: #D97766;
  --rd-bg: rgba(217, 119, 102, 0.12);
  --rd-bdr: #D97766;
  --yl: #E0B062;
  --cy: #7CB4C4;
  --or: #E8985A;

  --card-sh: var(--shadow);
  --card-sh-sm: var(--shadow-sm);
  --hover-bg: rgba(245, 240, 228, 0.04);

  --backdrop: rgba(10, 8, 6, 0.65);
}

/* ==========================================================================
   Global focus ring — uses the themed accent halo instead of bare lime
   ==========================================================================
   Overrides the old `box-shadow: 0 0 0 3px rgba(200, 255, 0, .15)` style
   that is baked into styles.css at :focus. Because this rule appears later
   in the cascade and has equal specificity, it wins.
*/
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--ac-ring);
}

/* ==========================================================================
   Reduced-motion respect
   ==========================================================================
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}