/*
  theme-noir.css — goth-glam: a cool, purple-tinted near-black (not
  Classic's warm near-black, not Terminal's green-tinted one — this is
  the 3rd near-black-bg theme on the site, differentiated by undertone,
  accent, font, and shape) with a soft mauve accent. Syne (an unusually
  proportioned, edgy display face) over Sora. Moderately sharpened
  corners — edgier than the site default, but not as severe as
  Crimson's Swiss-poster near-squares.

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

body[data-theme="noir"] {
  /* ---- Brand — soft mauve, not the site's other pinks ---- */
  --accent:      #e8b4d8;
  --accent-dark: #d492c4;
  --accent-soft: #f5dcee;
  --success:     #4ade80;
  --danger:      #fb7185;
  --warning:     #fbbf24;

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

  --gradient-brand: linear-gradient(135deg, #d492c4 0%, #e8b4d8 55%, #f5dcee 100%);

  /* ---- Surfaces — cool purple-black, not warm or green-tinted ---- */
  --bg:        #12111a;
  --bg-alt:    #0d0c13;
  --bg-card:   #1a1826;
  --bg-card2:  #211e30;
  --surface:   rgba(243,234,240,.045);
  --surface-hover: rgba(243,234,240,.075);
  --border:    rgba(243,234,240,.09);
  --border-strong: rgba(243,234,240,.18);

  /* ---- Text ---- */
  --text:      #f3eaf0;
  --text-muted: rgba(243,234,240,.62);
  --text-dim:  rgba(243,234,240,.42);

  /* ---- Shape — moderately sharpened, edgy but not severe ---- */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow:    0 10px 30px rgba(0,0,0,.5), 0 0 20px rgba(232,180,216,.14);

  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, -apple-system, sans-serif;
}

body[data-theme="noir"] h1,
body[data-theme="noir"] h2,
body[data-theme="noir"] h3,
body[data-theme="noir"] h4 {
  font-weight: 700;
  letter-spacing: -.02em;
}

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

/* ---- Header / nav glass ---- */
body[data-theme="noir"] header {
  background: rgba(18,17,26,.82);
}

/* ---- Primary button ---- */
body[data-theme="noir"] .btn-primary {
  background: var(--accent);
  color: #1a0f18;
  box-shadow: 0 0 18px rgba(232,180,216,.4);
}
body[data-theme="noir"] .btn-primary:hover {
  background: var(--accent-dark);
  color: #1a0f18;
  box-shadow: 0 0 26px rgba(232,180,216,.55);
}
body[data-theme="noir"] .btn-secondary:hover {
  border-color: var(--accent-soft);
}

/* ---- Hero: neutralize the three.js shader with a mauve glow wash. ---- */
body[data-theme="noir"] #hero-canvas {
  display: none;
}
body[data-theme="noir"] .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(232,180,216,.16), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(232,180,216,.08), transparent 55%),
    var(--bg);
}
body[data-theme="noir"] .hero-grain {
  background-image:
    linear-gradient(rgba(243,234,240,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,234,240,.045) 1px, transparent 1px);
}
body[data-theme="noir"] .hero-heading em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(232,180,216,.45);
}

/* ---- Custom cursor hover ring ---- */
body[data-theme="noir"] .custom-cursor-ring.cursor-hover {
  background: rgba(232,180,216,.12);
}

/* ---- Hero stats panel + level-tab indicator ---- */
body[data-theme="noir"] .hero-stats-panel {
  background: rgba(18,17,26,.55);
}
body[data-theme="noir"] .level-tab-indicator {
  box-shadow: 0 0 16px rgba(232,180,216,.4);
}

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

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

/* Difficulty badges — generic dark-tuned triple, reused verbatim. */
body[data-theme="noir"] .diff-easy   { background: rgba(34,197,94,.18);  color: #4ade80; }
body[data-theme="noir"] .diff-medium { background: rgba(242,194,24,.18); color: #fadb5f; }
body[data-theme="noir"] .diff-hard   { background: rgba(244,65,95,.18);  color: #fb7185; }