/**
 * WHY:    Hybrid theme — dark section dividers with light content slides.
 * WHAT:   Default light background. Slides with data-state="dark" get black bg.
 * HOW:    Uses reveal.js data-state attribute for per-slide overrides.
 * WHERE:  shared/themes/meos-split.css
 * WHEN:   Recommended for full presentations mixing educational + impact moments.
 *
 * Usage in HTML:
 *   <section data-state="dark">   — dark background, white text
 *   <section>                     — default light background
 */

@import url('./meos-base.css');

/* ─── Default: Light ─── */

:root {
  --meos-bg: var(--meos-white);
  --meos-text: var(--meos-black);
  --meos-text-secondary: var(--meos-neutral-700);
  --meos-border: var(--meos-black);
  --meos-code-bg: var(--meos-neutral-200);
}

.reveal {
  background: var(--meos-bg);
}

.reveal .slides section {
  background: var(--meos-bg);
}

/* ─── Dark State: Section Dividers & Impact Slides ─── */

.reveal .slides section[data-state="dark"],
.dark .reveal {
  --meos-bg: var(--meos-black);
  --meos-text: var(--meos-white);
  --meos-text-secondary: var(--meos-neutral-300);
  --meos-border: var(--meos-white);
  --meos-code-bg: var(--meos-neutral-800);
}

.reveal .slides section[data-state="dark"] {
  background: var(--meos-black);
  color: var(--meos-white);
}

.reveal .slides section[data-state="dark"] h1,
.reveal .slides section[data-state="dark"] h2,
.reveal .slides section[data-state="dark"] h3,
.reveal .slides section[data-state="dark"] h4 {
  color: var(--meos-white);
}

.reveal .slides section[data-state="dark"] p,
.reveal .slides section[data-state="dark"] li {
  color: var(--meos-neutral-300);
}

.reveal .slides section[data-state="dark"] a {
  color: var(--meos-accent-100);
  border-bottom-color: var(--meos-accent-100);
}

.reveal .slides section[data-state="dark"] .statement {
  color: var(--meos-white);
}

/* Dark slides: bottom rule in white */
.reveal .slides section[data-state="dark"]::after {
  background: var(--meos-white);
}

/* ─── Accent State: Amber Background ─── */

.reveal .slides section[data-state="accent"] {
  background: var(--meos-accent-300);
  color: var(--meos-black);
}

.reveal .slides section[data-state="accent"] h1,
.reveal .slides section[data-state="accent"] h2,
.reveal .slides section[data-state="accent"] h3 {
  color: var(--meos-black);
}

.reveal .slides section[data-state="accent"] p,
.reveal .slides section[data-state="accent"] li {
  color: var(--meos-neutral-800);
}

.reveal .slides section[data-state="accent"]::after {
  background: var(--meos-black);
}