/*
  theme-espresso.css — warm coffee-shop editorial: cream background,
  deep espresso-brown ink, and a caramel accent (a third tone, not a
  literal split of the reference pair — pure espresso-brown as an
  "accent" would just blend into the body text, so a lighter caramel
  highlight does the actual accenting, per the coffee-palette research
  guidance to keep the deepest brown for text and a tan for highlights).
  Lora (warm literary serif) + Karla (comfortable humanist sans).
  Slightly larger corner radius than the site default for a soft,
  cozy, pastry-case warmth.

  Scoped under `body[data-theme="espresso"]`, set at runtime by
  js/theme_switcher.js. 100% additive. No pill-radius override needed
  — style.css's hardcoded 999px pills stay round, matching this
  theme's soft identity (unlike Ember/Crimson, which sharpen them).
*/

body[data-theme="espresso"] {
  /* ---- Brand — caramel, a third tone from the coffee family ---- */
  --accent:      #8a582f;
  --accent-dark: #6f4624;
  --accent-soft: #ddb98a;
  --success:     #2f7a45;
  --danger:      #a5322a;
  --warning:     #a67c2e;

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

  --gradient-brand: linear-gradient(135deg, #8a582f 0%, #6f4624 100%);

  /* ---- Surfaces — cream, not near-white or near-black ---- */
  --bg:        #f0e5d3;
  --bg-alt:    #e8dbc5;
  --bg-card:   #f7efe1;
  --bg-card2:  #ede1cb;
  --surface:   rgba(56,42,33,.045);
  --surface-hover: rgba(56,42,33,.08);
  --border:    rgba(56,42,33,.14);
  --border-strong: rgba(56,42,33,.28);

  /* ---- Text ---- */
  --text:      #382a21;
  --text-muted: rgba(56,42,33,.62);
  --text-dim:  rgba(56,42,33,.42);

  /* ---- Shape — a touch softer/rounder than the site default ---- */
  --radius:    20px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --shadow:    0 10px 30px rgba(56,42,33,.14), 0 2px 10px rgba(56,42,33,.06);

  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Karla', system-ui, -apple-system, sans-serif;
}

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

/* ---- Header / nav glass ---- */
body[data-theme="espresso"] header {
  background: rgba(240,229,211,.85);
}

/* ---- Primary button ---- */
body[data-theme="espresso"] .btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(138,88,47,.32);
}
body[data-theme="espresso"] .btn-primary:hover {
  background: var(--accent-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(138,88,47,.42);
}
body[data-theme="espresso"] .btn-secondary:hover {
  border-color: var(--text);
}
body[data-theme="espresso"] .option-btn:hover:not(:disabled) .option-letter,
body[data-theme="espresso"] .subtab.active,
body[data-theme="espresso"] .level-tab.active {
  color: #fff;
}

/* ---- Hero: neutralize the three.js shader with a caramel wash. ---- */
body[data-theme="espresso"] #hero-canvas {
  display: none;
}
body[data-theme="espresso"] .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(138,88,47,.12), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(138,88,47,.07), transparent 55%),
    var(--bg);
}
body[data-theme="espresso"] .hero-grain {
  background-image:
    linear-gradient(rgba(56,42,33,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,42,33,.045) 1px, transparent 1px);
}
/* A cozy hand-drawn underline squiggle — the coffee-shop-menu touch,
   distinct from every other theme's plain color or block treatment. */
body[data-theme="espresso"] .hero-heading em {
  font-style: italic;
  color: var(--accent);
  text-decoration: underline wavy var(--accent-soft) 2px;
  text-underline-offset: 4px;
}

/* ---- Custom cursor hover ring ---- */
body[data-theme="espresso"] .custom-cursor-ring.cursor-hover {
  background: rgba(138,88,47,.12);
}

/* ---- Hero stats panel + level-tab indicator ---- */
body[data-theme="espresso"] .hero-stats-panel {
  background: rgba(247,239,225,.75);
}
body[data-theme="espresso"] .level-tab-indicator {
  box-shadow: 0 4px 14px rgba(138,88,47,.3);
}

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

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

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