/*
  theme-bloom.css — soft, romantic pastel theme: blush-pink paper
  background, deep berry ink, a rounded bubbly display face (Fredoka)
  over a soft rounded body face (Quicksand), a "highlighter swipe"
  treatment for emphasised words instead of a bordered box, and every
  shape pushed rounder rather than sharper.

  Scoped under `body[data-theme="bloom"]`, set at runtime by
  js/theme_switcher.js. 100% additive.

  Unlike theme-docket.css/theme-terminal.css (which sharpen every
  hardcoded 999px pill), this theme needs NO radius overrides for
  those elements — 999px is already maximally round, and --radius/
  --radius-sm/--radius-lg only get rounder here, so every
  variable-driven component (cards, inputs, panels) goes rounder for
  free with no extra selectors.

  The accent is deepened from the original #ec4899 (3.21:1 against
  this paper bg — fails WCAG AA's 4.5:1 for accent-text like the quiz
  timer/mark badges) to #b13673; the brighter pink survives as
  --accent-soft and the ends of the hero gradient instead.
*/

body[data-theme="bloom"] {
  /* ---- Brand — playful pink, deepened for contrast ---- */
  --accent:      #b13673;
  --accent-dark: #8f2a5c;
  --accent-soft: #f9a8d4;
  --success:     #16a34a;
  --danger:      #f43f5e;
  --warning:     #d97706;

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

  --gradient-brand: linear-gradient(135deg, #f472b6 0%, #b13673 55%, #8f2a5c 100%);

  /* ---- Surfaces — blush paper, not near-black or near-white ---- */
  --bg:        #fdf1f7;
  --bg-alt:    #fbe4ef;
  --bg-card:   #ffffff;
  --bg-card2:  #fce7f3;
  --surface:   rgba(219,39,119,.05);
  --surface-hover: rgba(219,39,119,.09);
  --border:    rgba(219,39,119,.14);
  --border-strong: rgba(219,39,119,.26);

  /* ---- Text — deep berry, not pure black ---- */
  --text:      #4a1942;
  --text-muted: rgba(74,25,66,.6);
  --text-dim:  rgba(74,25,66,.4);

  /* ---- Shape — extra rounded, the opposite of Docket/Terminal ---- */
  --radius:    20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --shadow:    0 10px 30px rgba(219,39,119,.15), 0 2px 10px rgba(219,39,119,.08);

  --font-display: 'Fredoka', 'Quicksand', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, -apple-system, sans-serif;
}

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

/* ---- Header / nav glass ---- */
body[data-theme="bloom"] header {
  background: rgba(253,241,247,.82);
}

/* ---- Primary button — pink gradient pill, soft glow ---- */
body[data-theme="bloom"] .btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 6px 18px rgba(177,54,115,.35);
}
body[data-theme="bloom"] .btn-primary:hover {
  background: var(--gradient-brand);
  color: #fff;
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(177,54,115,.45);
}
body[data-theme="bloom"] .btn-secondary:hover {
  border-color: var(--accent-soft);
}
body[data-theme="bloom"] .option-btn:hover:not(:disabled) .option-letter,
body[data-theme="bloom"] .subtab.active,
body[data-theme="bloom"] .level-tab.active {
  color: #fff;
}

/* ---- Hero: neutralize the three.js shader with a soft pink wash;
   emphasised word gets a "highlighter swipe" instead of a bordered
   box (Screenity/Docket's treatment), which suits this theme's
   softer, rounder identity better. ---- */
body[data-theme="bloom"] #hero-canvas {
  display: none;
}
body[data-theme="bloom"] .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(177,54,115,.14), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(249,168,212,.12), transparent 55%),
    var(--bg);
}
body[data-theme="bloom"] .hero-grain {
  background-image:
    linear-gradient(rgba(74,25,66,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,25,66,.035) 1px, transparent 1px);
}
body[data-theme="bloom"] .hero-heading em {
  font-style: normal;
  color: var(--accent-dark);
  background: linear-gradient(to right, rgba(177,54,115,.22), rgba(249,168,212,.28));
  border-radius: 999px;
  padding: 0 .3em;
}

/* ---- Custom cursor hover ring ---- */
body[data-theme="bloom"] .custom-cursor-ring.cursor-hover {
  background: rgba(177,54,115,.12);
}

/* ---- Hero stats panel + level-tab indicator ---- */
body[data-theme="bloom"] .hero-stats-panel {
  background: rgba(255,255,255,.65);
}
body[data-theme="bloom"] .level-tab-indicator {
  box-shadow: 0 4px 16px rgba(177,54,115,.4);
}

/* ---- Badges/chips/progress bars — ink-tinted, not white-tinted ---- */
body[data-theme="bloom"] .topic-progress-bar,
body[data-theme="bloom"] .quiz-progress-bar,
body[data-theme="bloom"] .mini-bar-track {
  background: rgba(74,25,66,.09);
}
body[data-theme="bloom"] .score-circle-bg {
  stroke: rgba(74,25,66,.1);
}
body[data-theme="bloom"] .topic-progress-table th {
  background: rgba(74,25,66,.03);
}
body[data-theme="bloom"] .topic-progress-table tr:hover td {
  background: rgba(74,25,66,.035);
}
body[data-theme="bloom"] .answer-chip {
  background: rgba(74,25,66,.055);
}
body[data-theme="bloom"] .answer-chip-remove {
  background: rgba(74,25,66,.1);
}
body[data-theme="bloom"] .format-help-panel code {
  background: rgba(74,25,66,.07);
}
body[data-theme="bloom"] .topic-chip {
  background: rgba(74,25,66,.06);
}
body[data-theme="bloom"] .ai-points {
  border-top-color: rgba(74,25,66,.1);
}
body[data-theme="bloom"] .toast {
  background: rgba(255,255,255,.95);
  color: var(--text);
  border-color: rgba(74,25,66,.1);
}

/* ---- Accent-tinted glows/focus-rings — pink, not orange ---- */
body[data-theme="bloom"] .marks-badge,
body[data-theme="bloom"] .option-btn:hover:not(:disabled),
body[data-theme="bloom"] .setup-option:hover,
body[data-theme="bloom"] .setup-option.selected,
body[data-theme="bloom"] .symbol-btn:hover,
body[data-theme="bloom"] .explanation-box.feedback-reveal {
  background: rgba(177,54,115,.1);
}
body[data-theme="bloom"] .quiz-timer {
  border-color: rgba(177,54,115,.25);
}
body[data-theme="bloom"] .explanation-box {
  background: rgba(177,54,115,.06);
  border-color: rgba(177,54,115,.25);
}
body[data-theme="bloom"] .explanation-box.feedback-reveal {
  border-color: rgba(177,54,115,.35);
}
body[data-theme="bloom"] .answer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(177,54,115,.15);
}
body[data-theme="bloom"] .quiz-progress-fill {
  box-shadow: 0 4px 16px rgba(177,54,115,.35);
}

/* ---- Difficulty badges — same generic light-appropriate triple
   used by every other light theme (hue-independent). ---- */
body[data-theme="bloom"] .diff-easy   { background: rgba(22,163,74,.12);  color: #15803d; }
body[data-theme="bloom"] .diff-medium { background: rgba(180,83,9,.14);  color: #92400e; }
body[data-theme="bloom"] .diff-hard   { background: rgba(220,38,38,.12); color: #b91c1c; }