/*
  theme-crimson.css — Swiss-poster style: a single bold crimson accent
  on warm chalk paper, huge confidence, near-square corners, and a
  tall condensed display face (Big Shoulders Display) set in uppercase
  for headings, paired with a plain grotesque body face (Work Sans).
  The sharpest corner radius on the whole site — sharper even than
  Docket's — because Swiss design's whole identity is crisp rectangles,
  not softened pills.

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

body[data-theme="crimson"] {
  /* ---- Brand — one bold red, nothing else competes ---- */
  --accent:      #c61236;
  --accent-dark: #8f0d27;
  --accent-soft: #f08ca0;
  --success:     #2f7a45;
  --danger:      #8f0d27;
  --warning:     #a6742e;

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

  --gradient-brand: linear-gradient(135deg, #c61236 0%, #8f0d27 100%);

  /* ---- Surfaces — warm chalk paper, crisp near-solid ink borders ---- */
  --bg:        #f2efe7;
  --bg-alt:    #eae6dc;
  --bg-card:   #f8f6f0;
  --bg-card2:  #efebe1;
  --surface:   rgba(35,26,21,.045);
  --surface-hover: rgba(35,26,21,.08);
  --border:    rgba(35,26,21,.55);
  --border-strong: rgba(35,26,21,.85);

  /* ---- Text ---- */
  --text:      #231a15;
  --text-muted: rgba(35,26,21,.62);
  --text-dim:  rgba(35,26,21,.42);

  /* ---- Shape — sharpest on the site ---- */
  --radius:    5px;
  --radius-sm: 2px;
  --radius-lg: 7px;
  --shadow:    4px 4px 0 rgba(35,26,21,.92);

  --font-display: 'Big Shoulders Display', Impact, sans-serif;
  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
}

body[data-theme="crimson"] h1,
body[data-theme="crimson"] h2,
body[data-theme="crimson"] h3,
body[data-theme="crimson"] h4 {
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* ---- Every hardcoded 999px pill in style.css, squared off ---- */
body[data-theme="crimson"] .btn,
body[data-theme="crimson"] .subtab-row,
body[data-theme="crimson"] .subtab,
body[data-theme="crimson"] .answer-chip,
body[data-theme="crimson"] .diff-badge,
body[data-theme="crimson"] .marks-badge,
body[data-theme="crimson"] .topic-chip,
body[data-theme="crimson"] .quiz-timer,
body[data-theme="crimson"] .level-tabs,
body[data-theme="crimson"] .level-tab-indicator,
body[data-theme="crimson"] .level-tab {
  border-radius: var(--radius-sm);
}
body[data-theme="crimson"] .answer-chip-remove {
  border-radius: 2px;
}
body[data-theme="crimson"] .dock-icon-btn {
  border-radius: 50%;
}

/* ---- Header / nav glass ---- */
body[data-theme="crimson"] header {
  background: rgba(242,239,231,.88);
}

/* ---- Primary button — solid crimson block, hard ink shadow ---- */
body[data-theme="crimson"] .btn-primary {
  background: var(--accent);
  color: var(--bg-card);
  box-shadow: 4px 4px 0 var(--text);
}
body[data-theme="crimson"] .btn-primary:hover {
  background: var(--accent-dark);
  color: var(--bg-card);
  box-shadow: 5px 5px 0 var(--text);
}
body[data-theme="crimson"] .btn-secondary:hover {
  border-color: var(--text);
}
body[data-theme="crimson"] .option-btn:hover:not(:disabled) .option-letter,
body[data-theme="crimson"] .subtab.active,
body[data-theme="crimson"] .level-tab.active {
  color: #fff;
}

/* ---- Hero: neutralize the three.js shader with a paper-appropriate
   wash, ink-tinted grain. ---- */
body[data-theme="crimson"] #hero-canvas {
  display: none;
}
body[data-theme="crimson"] .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(198,18,54,.1), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(198,18,54,.06), transparent 55%),
    var(--bg);
}
body[data-theme="crimson"] .hero-grain {
  background-image:
    linear-gradient(rgba(35,26,21,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,26,21,.045) 1px, transparent 1px);
}
/* Solid crimson block behind the emphasized word — the Swiss-poster
   "highlighter" treatment, distinct from every other theme's plain
   colored-text approach. box-decoration-break keeps the block clean
   if the word ever wraps across a line. */
body[data-theme="crimson"] .hero-heading em {
  font-style: normal;
  background: var(--accent);
  color: #fff;
  padding: 0 .15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

/* ---- Hero stats panel + level-tab indicator ---- */
body[data-theme="crimson"] .hero-stats-panel {
  background: rgba(248,246,240,.75);
}
body[data-theme="crimson"] .level-tab-indicator {
  box-shadow: none;
  border: 1px solid var(--border-strong);
}

/* ---- Badges/chips/progress bars — ink-tinted, not white-tinted ---- */
body[data-theme="crimson"] .topic-progress-bar,
body[data-theme="crimson"] .quiz-progress-bar,
body[data-theme="crimson"] .mini-bar-track {
  background: rgba(35,26,21,.1);
}
body[data-theme="crimson"] .score-circle-bg {
  stroke: rgba(35,26,21,.12);
}
body[data-theme="crimson"] .topic-progress-table th {
  background: rgba(35,26,21,.04);
}
body[data-theme="crimson"] .topic-progress-table tr:hover td {
  background: rgba(35,26,21,.04);
}
body[data-theme="crimson"] .answer-chip {
  background: rgba(35,26,21,.06);
  border: 1px solid var(--border);
}
body[data-theme="crimson"] .answer-chip-remove {
  background: rgba(35,26,21,.12);
}
body[data-theme="crimson"] .format-help-panel code {
  background: rgba(35,26,21,.08);
}
body[data-theme="crimson"] .topic-chip {
  background: rgba(35,26,21,.07);
}
body[data-theme="crimson"] .ai-points {
  border-top-color: rgba(35,26,21,.12);
}
body[data-theme="crimson"] .toast {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 4px 4px 0 rgba(35,26,21,.92);
}

/* ---- Accent-tinted glows/focus-rings ---- */
body[data-theme="crimson"] .marks-badge,
body[data-theme="crimson"] .option-btn:hover:not(:disabled),
body[data-theme="crimson"] .setup-option:hover,
body[data-theme="crimson"] .setup-option.selected,
body[data-theme="crimson"] .symbol-btn:hover,
body[data-theme="crimson"] .explanation-box.feedback-reveal {
  background: rgba(198,18,54,.1);
}
body[data-theme="crimson"] .quiz-timer {
  border-color: rgba(198,18,54,.32);
}
body[data-theme="crimson"] .explanation-box {
  background: rgba(198,18,54,.06);
  border-color: rgba(198,18,54,.32);
}
body[data-theme="crimson"] .explanation-box.feedback-reveal {
  border-color: rgba(198,18,54,.42);
}
body[data-theme="crimson"] .answer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(198,18,54,.18);
}
body[data-theme="crimson"] .quiz-progress-fill {
  box-shadow: none;
}

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