/*
  theme-docket.css — paper-and-ink editorial theme, inspired by a
  legal-debate site reference (KeepingTerms): warm paper-cream
  background, crisp near-solid borders instead of soft translucent
  ones, brick-red accent, a very bold geometric display face
  (Archivo), sharp corners, and hard offset "print" shadows instead
  of blurred glows.

  Scoped under `body[data-theme="docket"]`, set at runtime by
  js/theme_switcher.js. 100% additive — nothing in css/style.css or
  any other theme file is touched.

  Two deliberate departures from every other theme so far, both
  because this reference genuinely looks different, not by accident:
  1. Borders are near-solid ink, not a translucent whisper — Docket's
     whole visual identity IS its crisp ruled lines.
  2. Every hardcoded 999px pill radius in style.css (.btn, .subtab,
     .diff-badge, .marks-badge, .topic-chip, .answer-chip, .quiz-timer)
     is overridden to a small radius here — unlike the light/dark
     variants of classic/Screenity, which kept the same pill shapes.
*/

body[data-theme="docket"] {
  /* ---- Brand — brick red, not orange or blue ---- */
  --accent:      #b8352a;
  --accent-dark: #8f2a21;
  --accent-soft: #d98a80;
  --success:     #3a7d44;
  --danger:      #a52f22;
  --warning:     #a67c2e;

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

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

  /* ---- Surfaces — warm paper, not near-black or near-white ---- */
  --bg:        #ece9e0;
  --bg-alt:    #e3e0d5;
  --bg-card:   #f2f0e8;
  --bg-card2:  #e7e4d9;
  --surface:   rgba(23,21,18,.05);
  --surface-hover: rgba(23,21,18,.09);
  --border:    rgba(23,21,18,.55);
  --border-strong: rgba(23,21,18,.85);

  /* ---- Text ---- */
  --text:      #171512;
  --text-muted: rgba(23,21,18,.62);
  --text-dim:  rgba(23,21,18,.42);

  /* ---- Shape — sharp, not rounded ---- */
  --radius:    6px;
  --radius-sm: 3px;
  --radius-lg: 8px;
  --shadow:    3px 3px 0 rgba(23,21,18,.9);

  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

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

/* ---- Every hardcoded 999px pill in style.css, sharpened ---- */
body[data-theme="docket"] .btn,
body[data-theme="docket"] .subtab-row,
body[data-theme="docket"] .subtab,
body[data-theme="docket"] .answer-chip,
body[data-theme="docket"] .diff-badge,
body[data-theme="docket"] .marks-badge,
body[data-theme="docket"] .topic-chip,
body[data-theme="docket"] .quiz-timer,
body[data-theme="docket"] .level-tabs,
body[data-theme="docket"] .level-tab-indicator,
body[data-theme="docket"] .level-tab {
  border-radius: var(--radius-sm);
}
body[data-theme="docket"] .answer-chip-remove {
  border-radius: 2px;
}
/* The settings dock's icon buttons also carry the plain .btn class
   (for consistent theming), but must stay perfect circles regardless
   of this theme's sharp-corner identity — same specificity as the
   .btn rule above, so source order (this comes after) wins. */
body[data-theme="docket"] .dock-icon-btn {
  border-radius: 50%;
}

/* ---- Header / nav glass ---- */
body[data-theme="docket"] header {
  background: rgba(238,236,228,.85);
}

/* ---- Primary button — solid ink, not the accent (matches the
   reference: its light-background buttons are solid black; only on
   a dark surface does it switch to the accent red — see
   theme-docket-dark.css). Hard offset shadow, not a soft glow. ---- */
body[data-theme="docket"] .btn-primary {
  background: var(--text);
  color: var(--bg-card);
  box-shadow: 3px 3px 0 var(--accent);
}
body[data-theme="docket"] .btn-primary:hover {
  background: #000;
  color: var(--bg-card);
  box-shadow: 4px 4px 0 var(--accent);
}
body[data-theme="docket"] .btn-secondary:hover {
  border-color: var(--text);
}
body[data-theme="docket"] .option-btn:hover:not(:disabled) .option-letter,
body[data-theme="docket"] .subtab.active,
body[data-theme="docket"] .level-tab.active {
  color: #fff;
}

/* ---- Hero: neutralize the three.js shader with a paper-appropriate
   wash, ink-tinted grain instead of white-tinted. ---- */
body[data-theme="docket"] #hero-canvas {
  display: none;
}
body[data-theme="docket"] .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(184,53,42,.1), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(184,53,42,.06), transparent 55%),
    var(--bg);
}
body[data-theme="docket"] .hero-grain {
  background-image:
    linear-gradient(rgba(23,21,18,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,21,18,.045) 1px, transparent 1px);
}
body[data-theme="docket"] .hero-heading em {
  font-style: normal;
  color: var(--accent);
}

/* ---- Custom cursor hover ring ---- */
body[data-theme="docket"] .custom-cursor-ring.cursor-hover {
  background: rgba(184,53,42,.1);
}

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

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

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

/* ---- Difficulty badges — their own light-appropriate pair ---- */
body[data-theme="docket"] .diff-easy   { background: rgba(58,125,68,.14);  color: #2b5c33; }
body[data-theme="docket"] .diff-medium { background: rgba(166,124,46,.16); color: #7a5c22; }
body[data-theme="docket"] .diff-hard   { background: rgba(165,47,34,.14); color: #7f2419; }