/*
  theme-mulberry.css — deep jewel-tone plum background with a jade-mint
  accent (not the pale reference mint itself — that's reserved for
  --accent-soft and the light variant's background; a saturated jade
  reads as an actual accent against dark plum, where the pale mint
  would just blend into the near-white text). Newsreader (literary
  serif) + Manrope (clean modern sans) — moody editorial, not the
  quirky-optical Fraunces or rounded Fredoka already used elsewhere.

  Scoped under `body[data-theme="mulberry"]`, set at runtime by
  js/theme_switcher.js. 100% additive. Soft pill shapes throughout —
  no radius override, matching Classic/Screenity/Bloom's convention of
  leaving style.css's default rounded corners alone.
*/

body[data-theme="mulberry"] {
  /* ---- Brand — jade-mint, not orange/blue/red ---- */
  --accent:      #57b98c;
  --accent-dark: #3f9670;
  --accent-soft: #dce8db;
  --success:     #4ade9a;
  --danger:      #fb7185;
  --warning:     #fbbf24;

  --primary: var(--accent);
  --primary-dark: var(--accent-dark);

  --gradient-brand: linear-gradient(135deg, #3f9670 0%, #57b98c 55%, #8ad1b0 100%);

  /* ---- Surfaces — deep mulberry plum, not near-black ---- */
  --bg:        #3a2036;
  --bg-alt:    #331c30;
  --bg-card:   #442a40;
  --bg-card2:  #4e3149;
  --surface:   rgba(234,241,232,.045);
  --surface-hover: rgba(234,241,232,.075);
  --border:    rgba(234,241,232,.09);
  --border-strong: rgba(234,241,232,.18);

  /* ---- Text ---- */
  --text:      #eaf1e8;
  --text-muted: rgba(234,241,232,.62);
  --text-dim:  rgba(234,241,232,.42);

  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(87,185,140,.12);

  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}

body[data-theme="mulberry"] h1,
body[data-theme="mulberry"] h2,
body[data-theme="mulberry"] h3,
body[data-theme="mulberry"] h4 {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---- Header / nav glass ---- */
body[data-theme="mulberry"] header {
  background: rgba(58,32,54,.82);
}

/* ---- Primary button — jade bg with dark mulberry-ink text, tying the
   two brand colors together directly. ---- */
body[data-theme="mulberry"] .btn-primary {
  background: var(--accent);
  color: #24151f;
  box-shadow: 0 0 18px rgba(87,185,140,.4);
}
body[data-theme="mulberry"] .btn-primary:hover {
  background: var(--accent-dark);
  color: #eaf1e8;
  box-shadow: 0 0 26px rgba(87,185,140,.55);
}
body[data-theme="mulberry"] .btn-secondary:hover {
  border-color: var(--accent-soft);
}

/* ---- Hero: neutralize the three.js shader with a jade/plum wash. ---- */
body[data-theme="mulberry"] #hero-canvas {
  display: none;
}
body[data-theme="mulberry"] .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(87,185,140,.16), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(140,63,114,.12), transparent 55%),
    var(--bg);
}
body[data-theme="mulberry"] .hero-grain {
  background-image:
    linear-gradient(rgba(234,241,232,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,241,232,.045) 1px, transparent 1px);
}
body[data-theme="mulberry"] .hero-heading em {
  font-style: italic;
  color: var(--accent);
}

/* ---- Custom cursor hover ring ---- */
body[data-theme="mulberry"] .custom-cursor-ring.cursor-hover {
  background: rgba(87,185,140,.14);
}

/* ---- Hero stats panel + level-tab indicator ---- */
body[data-theme="mulberry"] .hero-stats-panel {
  background: rgba(58,32,54,.55);
}
body[data-theme="mulberry"] .level-tab-indicator {
  box-shadow: 0 0 16px rgba(87,185,140,.4);
}

/* ---- Badges/chips/progress bars — light-tinted, not white ---- */
body[data-theme="mulberry"] .topic-progress-bar,
body[data-theme="mulberry"] .quiz-progress-bar,
body[data-theme="mulberry"] .mini-bar-track {
  background: rgba(234,241,232,.09);
}
body[data-theme="mulberry"] .score-circle-bg {
  stroke: rgba(234,241,232,.09);
}
body[data-theme="mulberry"] .topic-progress-table th {
  background: rgba(234,241,232,.035);
}
body[data-theme="mulberry"] .topic-progress-table tr:hover td {
  background: rgba(234,241,232,.04);
}
body[data-theme="mulberry"] .answer-chip {
  background: rgba(234,241,232,.07);
}
body[data-theme="mulberry"] .answer-chip-remove {
  background: rgba(234,241,232,.12);
}
body[data-theme="mulberry"] .format-help-panel code {
  background: rgba(234,241,232,.08);
}
body[data-theme="mulberry"] .topic-chip {
  background: rgba(234,241,232,.07);
}
body[data-theme="mulberry"] .ai-points {
  border-top-color: rgba(234,241,232,.12);
}
body[data-theme="mulberry"] .toast {
  background: rgba(58,32,54,.92);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* ---- Accent-tinted glows/focus-rings — jade, not orange ---- */
body[data-theme="mulberry"] .marks-badge,
body[data-theme="mulberry"] .option-btn:hover:not(:disabled),
body[data-theme="mulberry"] .setup-option:hover,
body[data-theme="mulberry"] .setup-option.selected,
body[data-theme="mulberry"] .symbol-btn:hover,
body[data-theme="mulberry"] .explanation-box.feedback-reveal {
  background: rgba(87,185,140,.14);
}
body[data-theme="mulberry"] .quiz-timer {
  border-color: rgba(87,185,140,.35);
}
body[data-theme="mulberry"] .explanation-box {
  background: rgba(87,185,140,.08);
  border-color: rgba(87,185,140,.32);
}
body[data-theme="mulberry"] .explanation-box.feedback-reveal {
  border-color: rgba(87,185,140,.42);
}
body[data-theme="mulberry"] .answer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(87,185,140,.2);
}
body[data-theme="mulberry"] .quiz-progress-fill {
  box-shadow: 0 4px 16px rgba(87,185,140,.4);
}

/* Difficulty badges — same generic dark-tuned triple every dark theme
   reuses (already hue-independent and proven legible on dark bg). */
body[data-theme="mulberry"] .diff-easy   { background: rgba(34,197,94,.18);  color: #4ade80; }
body[data-theme="mulberry"] .diff-medium { background: rgba(242,194,24,.18); color: #fadb5f; }
body[data-theme="mulberry"] .diff-hard   { background: rgba(244,65,95,.18);  color: #fb7185; }