/*
 * Theme: D. Dark (theme-dark)
 * The default Loopback theme. Dark surfaces, light text.
 * Applied when: [data-theme="dark"] or no data-theme attribute.
 *
 * These values are the canonical dark-theme variable set, extracted from
 * player.css :root. Adding a theme here makes the dark theme explicit and
 * allows future changes without touching player.css.
 *
 * Register colors are the canonical values from the Loopback design system.
 * Both theme files use these same register values for consistency.
 *
 * Selector: :root[data-theme="dark"] — specificity (0,2,0) beats player.css
 * :root (0,1,0) regardless of stylesheet load order.
 */
:root[data-theme="dark"] {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:      #0D0D0D;
  --surf:    #161616;
  --raised:  #1E1E1E;
  --inset:   #262626;
  --crease:  #383838;
  --dark:    #080808;
  --darkest: #050505;
  --ink:     #EDE8E0;

  /* ── Foreground ───────────────────────────────────────────────────────── */
  --fg:  #EDE8E0;
  --fg2: #B0A898;
  --fg3: #7A7268;
  --fg4: #4A4540;

  /* ── On-dark (used on dark nav/header surfaces) ───────────────────────── */
  --od:  #EDE8E0;
  --odm: rgba(237,232,224,0.55);
  --ods: rgba(237,232,224,0.15);

  /* ── Accent ───────────────────────────────────────────────────────────── */
  --red:      #C8221E;
  --red2:     #961816;
  --red-wash: rgba(200,34,30,0.06);

  /* ── Emotional registers ──────────────────────────────────────────────── */
  --reg-dark:       #5C2D8A;
  --reg-tense:      #B82020;
  --reg-reflective: #1E6A94;
  --reg-peaceful:   #1E7A4A;
  --reg-energetic:  #A85E10;
  --reg-euphoric:   #3A7A10;

  /* ── Rules / dividers ─────────────────────────────────────────────────── */
  --rule:  rgba(255,255,255,0.08);
  --rule2: rgba(255,255,255,0.14);
  --rule3: rgba(255,255,255,0.04);
}