/*
  theme-docket-dark.css — dark mode for the Docket theme, lifted
  straight from the reference's own dark CTA band: near-black paper,
  cream ink, the same brick red brightened slightly for contrast.

  Scoped under `body[data-theme="docket"].theme-dark` (compound
  selector, always beats theme-docket.css's single-attribute rules on
  specificity). Toggled at runtime by js/color_scheme.js.

  One deliberate divergence from theme-docket.css, not a mistake: the
  reference's own dark section uses a solid RED button, not a solid
  black one (black-on-black would vanish) — so .btn-primary flips to
  the accent color here instead of just inheriting the light file's
  "solid ink" rule.

  The "brightened slightly for contrast" brick red still only cleared
  4.19:1 against this near-black — short of WCAG AA's 4.5:1 for
  accent-text (quiz timer, mark badges) — so it's lightened a touch
  further here.
*/

body[data-theme="docket"].theme-dark {
  --accent:      #d86359;
  --accent-dark: #a8362c;
  --accent-soft: #e8998e;
  --success:     #4f9a5c;
  --danger:      #d86359;
  --warning:     #c99a4a;

  --bg:        #141210;
  --bg-alt:    #191613;
  --bg-card:   #1a1714;
  --bg-card2:  #211d19;
  --surface:   rgba(237,235,225,.05);
  --surface-hover: rgba(237,235,225,.09);
  --border:    rgba(237,235,225,.4);
  --border-strong: rgba(237,235,225,.68);

  --text:      #ede9de;
  --text-muted: rgba(237,233,222,.6);
  --text-dim:  rgba(237,233,222,.4);

  --shadow: 0 10px 30px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
}

/* ---- Header / hero-stats glass — dark, not light ---- */
body[data-theme="docket"].theme-dark header {
  background: rgba(20,18,16,.82);
}
body[data-theme="docket"].theme-dark .hero-stats-panel {
  background: rgba(20,18,16,.6);
}

/* ---- Primary button — accent red (matches the reference's own
   dark-section CTA), not solid ink like the light variant. ---- */
body[data-theme="docket"].theme-dark .btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6);
}
body[data-theme="docket"].theme-dark .btn-primary:hover {
  background: var(--accent-dark);
  color: #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
}

/* ---- Hero: brighter red glow, cream-tint grain lines ---- */
body[data-theme="docket"].theme-dark .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(216,99,89,.18), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(216,99,89,.1), transparent 55%),
    var(--bg);
}
body[data-theme="docket"].theme-dark .hero-grain {
  background-image:
    linear-gradient(rgba(237,233,222,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,233,222,.045) 1px, transparent 1px);
}

/* ---- Badges/chips/progress bars/toast — cream-tint, not ink-tint ---- */
body[data-theme="docket"].theme-dark .topic-progress-bar,
body[data-theme="docket"].theme-dark .quiz-progress-bar,
body[data-theme="docket"].theme-dark .mini-bar-track {
  background: rgba(237,233,222,.1);
}
body[data-theme="docket"].theme-dark .score-circle-bg {
  stroke: rgba(237,233,222,.1);
}
body[data-theme="docket"].theme-dark .topic-progress-table th {
  background: rgba(237,233,222,.04);
}
body[data-theme="docket"].theme-dark .topic-progress-table tr:hover td {
  background: rgba(237,233,222,.04);
}
body[data-theme="docket"].theme-dark .answer-chip {
  background: rgba(237,233,222,.07);
}
body[data-theme="docket"].theme-dark .answer-chip-remove {
  background: rgba(237,233,222,.12);
}
body[data-theme="docket"].theme-dark .format-help-panel code {
  background: rgba(237,233,222,.08);
}
body[data-theme="docket"].theme-dark .topic-chip {
  background: rgba(237,233,222,.07);
}
body[data-theme="docket"].theme-dark .ai-points {
  border-top-color: rgba(237,233,222,.12);
}
body[data-theme="docket"].theme-dark .toast {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 3px 3px 0 rgba(0,0,0,.6);
}

/* ---- Accent-tinted glows — brighter red for a dark surface ---- */
body[data-theme="docket"].theme-dark .marks-badge,
body[data-theme="docket"].theme-dark .option-btn:hover:not(:disabled),
body[data-theme="docket"].theme-dark .setup-option:hover,
body[data-theme="docket"].theme-dark .setup-option.selected,
body[data-theme="docket"].theme-dark .symbol-btn:hover,
body[data-theme="docket"].theme-dark .explanation-box.feedback-reveal {
  background: rgba(216,99,89,.14);
}
body[data-theme="docket"].theme-dark .quiz-timer {
  border-color: rgba(216,99,89,.35);
}
body[data-theme="docket"].theme-dark .explanation-box {
  background: rgba(216,99,89,.08);
  border-color: rgba(216,99,89,.35);
}
body[data-theme="docket"].theme-dark .explanation-box.feedback-reveal {
  border-color: rgba(216,99,89,.45);
}
body[data-theme="docket"].theme-dark .answer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(216,99,89,.22);
}

/* ---- Difficulty badges — bright-on-dark pair, reusing the same
   values css/style.css's original dark theme already proved work. ---- */
body[data-theme="docket"].theme-dark .diff-easy   { background: rgba(34,197,94,.18);  color: #4ade80; }
body[data-theme="docket"].theme-dark .diff-medium { background: rgba(242,194,24,.18); color: #fadb5f; }
body[data-theme="docket"].theme-dark .diff-hard   { background: rgba(244,65,95,.18);  color: #fb7185; }