/* Nocturne: the dark theme (<html data-theme="dark">), loaded after style.css on every page
   (templates/base.html) and bundled unlayered into the React build (frontend/src/index.css).
   Crimson carries action, state and text accents; gold is kept for frames, rules and artwork. */

html[data-theme="dark"] {
  --ic-bg: #100E0D;
  --ic-surface: #181513;
  --ic-surface-2: #211D1A;
  --ic-border: #2C2723;
  --ic-border-2: #443B33;
  --ic-text: #ECE4D5;
  --ic-muted: #A69C8C;
  --ic-hint: #766B5E;
  --ic-accent: #D25C5C;
  --ic-accent-dark: #A93F41;
  --ic-accent-text: #FBF6EE;
  --ic-accent-bg: rgba(210, 92, 92, 0.12);
  --ic-selection-bg: rgba(205, 168, 94, 0.28);
  --ic-locked: #CDA85E;
  --ic-locked-bg: rgba(205, 168, 94, 0.12);
  --ic-correct: #83B38E;
  --ic-correct-bg: rgba(131, 179, 142, 0.12);
  --ic-wrong: #D25C5C;
  --ic-wrong-bg: rgba(210, 92, 92, 0.12);
  --ic-gold: #CDA85E;
  --ic-gold-soft: rgba(205, 168, 94, 0.22);
  --ic-gold-faint: rgba(205, 168, 94, 0.08);
  --asset-texture: url("/static/assets/aesculon/texture-obsidian.png");
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: var(--ic-bg);
  /* Lamplight from above, fading into the obsidian texture */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(205, 168, 94, 0.07), transparent 70%),
    var(--asset-texture);
  background-attachment: fixed, scroll;
}

/* Header: a single gilded rule, gold underline on the current page */
html[data-theme="dark"] .topbar {
  border-bottom-color: var(--ic-gold-soft);
  background: color-mix(in srgb, var(--ic-bg) 92%, transparent);
  backdrop-filter: blur(6px);
}

html[data-theme="dark"] .topnav a:hover,
html[data-theme="dark"] .topnav a.active {
  border-bottom-color: var(--ic-accent);
  color: var(--ic-text);
}

html[data-theme="dark"] .wordmark {
  color: var(--ic-text);
}

html[data-theme="dark"] .xp-pill {
  border-color: color-mix(in srgb, var(--ic-accent) 55%, transparent);
  background: var(--ic-accent-bg);
  color: var(--ic-accent);
}

/* Text accents are crimson; gold is kept for frames, rules and artwork */
html[data-theme="dark"] .page-kicker,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .explanation__label,
html[data-theme="dark"] .reference__label {
  color: var(--ic-accent);
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .panel-title {
  color: var(--ic-text);
}

/* Cards: raised obsidian slabs with a faint gilded top edge */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .empty-panel,
html[data-theme="dark"] .practice-card {
  border-color: var(--ic-border);
  background: linear-gradient(180deg, var(--ic-surface) 0%, color-mix(in srgb, var(--ic-surface) 60%, var(--ic-bg)) 100%);
  box-shadow: inset 0 1px 0 var(--ic-gold-faint), 0 12px 32px -18px rgba(0, 0, 0, 0.7);
}

/* Practice: answer options */
html[data-theme="dark"] .opt {
  border-color: var(--ic-border);
  background: color-mix(in srgb, var(--ic-surface) 70%, var(--ic-bg));
}

html[data-theme="dark"] .opt:hover:not(:disabled),
html[data-theme="dark"] .opt:focus-visible:not(:disabled) {
  border-color: var(--ic-gold-soft);
  background: var(--ic-surface-2);
}

html[data-theme="dark"] .option-key {
  color: var(--ic-accent);
}

html[data-theme="dark"] .opt.is-selected {
  border-color: var(--ic-accent);
  background: var(--ic-accent-bg);
}

html[data-theme="dark"] .opt.is-correct {
  border-color: var(--ic-correct);
  background: var(--ic-correct-bg);
}

html[data-theme="dark"] .opt.is-wrong {
  border-color: var(--ic-wrong);
  background: var(--ic-wrong-bg);
}

html[data-theme="dark"] .mode-chip.active,
html[data-theme="dark"] .mode-chip:hover {
  border-color: var(--ic-accent);
  background: var(--ic-accent-bg);
  color: var(--ic-text);
}

/* Explanation and trap: gold rule for the reasoning, crimson rule for the trap */
html[data-theme="dark"] .explanation {
  border-left: 2px solid var(--ic-gold-soft);
  border-radius: 0;
  background: var(--ic-gold-faint);
}

html[data-theme="dark"] .trap {
  border-left: 2px solid var(--ic-accent);
  border-radius: 0;
  background: var(--ic-accent-bg);
}

/* Buttons */
html[data-theme="dark"] .next-btn:not(:disabled) {
  border-color: var(--ic-accent);
  background: linear-gradient(180deg, var(--ic-accent) 0%, var(--ic-accent-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .ghost-btn {
  border-color: var(--ic-border-2);
  background: transparent;
}

html[data-theme="dark"] .ghost-btn:hover,
html[data-theme="dark"] .theme-toggle:hover {
  border-color: var(--ic-gold-soft);
  background: var(--ic-gold-faint);
}

/* Dialogs and floating pills */
html[data-theme="dark"] .version-dialog,
html[data-theme="dark"] .feedback-notice-dialog,
html[data-theme="dark"] .intro-dialog,
html[data-theme="dark"] .settings-dialog {
  border-color: var(--ic-gold-soft);
  background: var(--ic-surface);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
}

html[data-theme="dark"] .version-dialog::backdrop,
html[data-theme="dark"] .feedback-notice-dialog::backdrop,
html[data-theme="dark"] .intro-dialog::backdrop,
html[data-theme="dark"] .settings-dialog::backdrop {
  background: rgba(5, 4, 3, 0.66);
}

html[data-theme="dark"] .guide-head {
  border-bottom-color: var(--ic-gold-soft);
}

html[data-theme="dark"] .guide-section h3::after {
  border-bottom-color: var(--ic-gold);
}

html[data-theme="dark"] .patch-notes-pill,
html[data-theme="dark"] .input-toggle-pill,
html[data-theme="dark"] .site-feedback-pill {
  border-color: var(--ic-border-2);
  background: var(--ic-surface);
}

html[data-theme="dark"] ::selection {
  background: var(--ic-selection-bg);
  color: var(--ic-text);
}

/* The notation divider image is drawn for light parchment; use a short gold rule instead */
html[data-theme="dark"] .explanation__label::after,
html[data-theme="dark"] .trap__label::after,
html[data-theme="dark"] .reference__label::after {
  width: 32px;
  height: 1px;
  margin-top: 6px;
  background: var(--ic-gold-soft);
  opacity: 1;
}

html[data-theme="dark"] .trap__label::after {
  background: var(--ic-accent);
}


/* Home: keep the call-to-action crimson and the cohort card gilded, on top of the generic card style */
html[data-theme="dark"] .next-action {
  border-color: color-mix(in srgb, var(--ic-accent) 60%, transparent);
  background:
    radial-gradient(ellipse 55% 120% at 100% 0%, rgba(210, 92, 92, 0.16), transparent 70%),
    linear-gradient(135deg, #251314 0%, #1A1211 55%, #151010 100%);
}

html[data-theme="dark"] .cohort-pulse {
  border-color: var(--ic-gold-soft);
}

/* Card artwork: invert brightness but keep hue, so the white marble turns obsidian while the gold
   stays gold. A left-hand scrim keeps the text readable. */
html[data-theme="dark"] .cohort-pulse::before,
html[data-theme="dark"] .action-card--duel::before {
  filter: invert(1) hue-rotate(180deg) sepia(0.3) saturate(1.3) contrast(0.82) brightness(1.3);
  mix-blend-mode: normal;
  opacity: 0.9;
}

/* The scrim is drawn white because the filter above inverts it to near-black */
html[data-theme="dark"] .cohort-pulse::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%),
    var(--asset-cohort-pulse) center / cover no-repeat;
}

html[data-theme="dark"] .action-card--duel::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%),
    var(--asset-duel-card) center 30% / cover no-repeat;
}

html[data-theme="dark"] .action-card.action-card--duel:hover::before {
  filter: invert(1) hue-rotate(180deg) sepia(0.3) saturate(1.4) contrast(0.82) brightness(1.4);
  opacity: 1;
}

/* Call-to-action cards: no painted wash in Nocturne, just an oxblood-to-obsidian slab and a
   gold inner frame like the Cohort card. */
html[data-theme="dark"] .next-action::before {
  content: none;
}

html[data-theme="dark"] .next-action::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ic-gold-faint);
  pointer-events: none;
}