/*
  theme-light.css — optional light mode for the ORIGINAL (classic) UI.

  Scoped entirely under `body[data-theme="classic"].theme-light`, toggled at runtime by
  js/color_scheme.js. Nothing in css/style.css is modified — with the
  toggle off (the default), the site is byte-for-byte the original
  dark theme. This is a light *mode* of the same identity, not a
  rebrand: Fraunces/Inter/JetBrains Mono fonts and
  --success/--warning/--danger stay exactly as-is. The accent is the
  one exception — the original #ff5a1f only clears 2.92:1 against this
  light background (fails WCAG AA's 4.5:1 for the accent-colored text
  it's used as, e.g. the quiz timer/mark badges), so it's deepened
  here specifically for legibility, the same fix every other theme's
  light-appropriate accent already gets. Otherwise, only the
  surface/text variables flip to light, plus the same short list of
  hardcoded (non-variable) literals that css/theme-screenity.css
  already had to solve for its own light background.
*/

body[data-theme="classic"].theme-light {
  /* ---- Brand — same orange family, deepened for light-bg contrast ---- */
  --accent:      #bf4317;
  --accent-dark: #8f3211;
  --accent-soft: #ff9d6b;

  /* ---- Surfaces — warm off-white, not warm near-black ---- */
  --bg:        #faf7f2;
  --bg-alt:    #f2ede4;
  --bg-card:   #ffffff;
  --bg-card2:  #f5f1ea;
  --surface:   rgba(20,16,10,.045);
  --surface-hover: rgba(20,16,10,.075);
  --border:    rgba(20,16,10,.09);
  --border-strong: rgba(20,16,10,.18);

  /* ---- Text ---- */
  --text:      #1c1912;
  --text-muted: rgba(20,16,10,.58);
  --text-dim:  rgba(20,16,10,.38);

  --shadow: 0 10px 30px rgba(20,16,10,.08), 0 2px 10px rgba(20,16,10,.04);
}

/* ---- Header / nav glass (was a hardcoded near-black rgba) ---- */
body[data-theme="classic"].theme-light header {
  background: rgba(255,255,255,.75);
}

/* ---- Hero: neutralize the three.js shader (hardcoded dark/orange in
   hero-scene.js) with a light, still-warm CSS gradient wash instead. ---- */
body[data-theme="classic"].theme-light #hero-canvas {
  display: none;
}
body[data-theme="classic"].theme-light .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(255,90,31,.14), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(255,178,122,.10), transparent 55%),
    var(--bg);
}
body[data-theme="classic"].theme-light .hero-grain {
  background-image:
    linear-gradient(rgba(20,16,10,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,16,10,.035) 1px, transparent 1px);
}

/* ---- Hero stats panel (hardcoded near-black glass) ---- */
body[data-theme="classic"].theme-light .hero-stats-panel {
  background: rgba(255,255,255,.6);
}

/* ---- Badges/chips/progress bars — hardcoded white-tint fills that
   need a dark-tint equivalent to read on a light background ---- */
body[data-theme="classic"].theme-light .topic-progress-bar,
body[data-theme="classic"].theme-light .quiz-progress-bar,
body[data-theme="classic"].theme-light .mini-bar-track {
  background: rgba(20,16,10,.09);
}
body[data-theme="classic"].theme-light .score-circle-bg {
  stroke: rgba(20,16,10,.1);
}
body[data-theme="classic"].theme-light .topic-progress-table th {
  background: rgba(20,16,10,.03);
}
body[data-theme="classic"].theme-light .topic-progress-table tr:hover td {
  background: rgba(20,16,10,.035);
}
body[data-theme="classic"].theme-light .answer-chip {
  background: rgba(20,16,10,.055);
}
body[data-theme="classic"].theme-light .answer-chip-remove {
  background: rgba(20,16,10,.1);
}
body[data-theme="classic"].theme-light .format-help-panel code {
  background: rgba(20,16,10,.07);
}
body[data-theme="classic"].theme-light .topic-chip {
  background: rgba(20,16,10,.06);
}
body[data-theme="classic"].theme-light .ai-points {
  border-top-color: rgba(20,16,10,.1);
}
body[data-theme="classic"].theme-light .toast {
  background: rgba(255,255,255,.95);
  color: var(--text);
  border-color: rgba(20,16,10,.1);
}

/* ---- Difficulty badges — hardcode both bg and text; the original
   values are tuned for a dark background and are too low-contrast on
   a light one, so these get their own light-appropriate pair. ---- */
body[data-theme="classic"].theme-light .diff-easy   { background: rgba(22,163,74,.12);  color: #15803d; }
body[data-theme="classic"].theme-light .diff-medium { background: rgba(180,83,9,.14);  color: #92400e; }
body[data-theme="classic"].theme-light .diff-hard   { background: rgba(220,38,38,.12); color: #b91c1c; }

/* ---- Primary button + accent-tinted glows/focus-rings — retuned to
   the deepened accent so the tint hue matches the (now-darker) text/
   border color exactly, instead of a subtle mismatch against the
   original brighter orange. ---- */
body[data-theme="classic"].theme-light .btn-primary {
  box-shadow: 0 6px 20px rgba(191,67,23,.3);
}
body[data-theme="classic"].theme-light .btn-primary:hover {
  box-shadow: 0 10px 30px rgba(191,67,23,.45);
}
body[data-theme="classic"].theme-light .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(191,67,23,.14), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(255,157,107,.10), transparent 55%),
    var(--bg);
}
body[data-theme="classic"].theme-light .marks-badge,
body[data-theme="classic"].theme-light .option-btn:hover:not(:disabled),
body[data-theme="classic"].theme-light .setup-option:hover,
body[data-theme="classic"].theme-light .setup-option.selected,
body[data-theme="classic"].theme-light .symbol-btn:hover,
body[data-theme="classic"].theme-light .explanation-box.feedback-reveal {
  background: rgba(191,67,23,.1);
}
body[data-theme="classic"].theme-light .quiz-timer {
  border-color: rgba(191,67,23,.28);
}
body[data-theme="classic"].theme-light .explanation-box {
  background: rgba(191,67,23,.06);
  border-color: rgba(191,67,23,.28);
}
body[data-theme="classic"].theme-light .quiz-progress-fill {
  box-shadow: 0 4px 16px rgba(191,67,23,.35);
}
body[data-theme="classic"].theme-light .answer-input:focus {
  box-shadow: 0 0 0 4px rgba(191,67,23,.16);
}