/* =====================
   CSS VARIABLES — DARK
===================== */
:root[data-theme="dark"] {
  --bg:               #0D0609;
  --bg-rgb:           13, 6, 9;
  --bg-section:       #110810;
  --bg-card:          #1A1019;
  --bg-hero-img:      #5A1824;
  --bg-footer:        #080406;
  --text:             #F0EAE8;
  --text-muted:       #cebac4;
  --text-dim:         #B8A0AC;
  --text-faint:       #2E1E24;
  --accent:           #a34054;
  --accent-nav:       #ffa9ba;
  --accent-hover:     #8B2840;
  --border:           rgba(240, 234, 232, 0.08);
  --border-mid:       rgba(240, 234, 232, 0.12);
  --border-accent:    rgba(112, 32, 48, 0.3);
  --logo-fill:        #F0EAE8;
  --logo-bg:          #000000;  /* fondo negro en dark */
  --num-color:        #B8A0AC;
  --thumb-bg:         #1A1019;
  --thumb-bg-alt:     #150D14;
  --ticker-bg:        #110810;
  --ticker-accent:    #ffffff;
  --hero-line:        #F0EAE8;
  --hero-eyebrow:     #F0EAE8;
  --hero-text:        #F0EAE8;
  --hero-muted:       #E0D8D2;
  --hero-meta:        #CEBAC4;
  --hero-border:      rgba(240, 234, 232, 0.2);
  --hero-btn-bg:      transparent;
  --hero-btn-border:  rgba(240, 234, 232, 0.8);
  --hero-btn-hover:   #702030;
  --footer-text:      #F0EAE8;
  --footer-muted:     rgba(240, 234, 232, 0.5);
  --footer-muted-dim: rgba(240, 234, 232, 0.4);
  --footer-border:    rgba(112, 32, 48, 0.2);
}

/* =====================
   CSS VARIABLES — LIGHT
===================== */
:root[data-theme="light"] {
  --bg:               #F5F1EC;
  --bg-rgb:           245, 241, 236;
  --bg-section:       #EDE8E2;
  --bg-card:          #FDFAF7;
  --bg-hero-img:      #F5EDE8;
  --bg-footer:        #702030;
  --text:             #1A0810;
  --text-muted:       #7A5A64;
  --text-dim:         #A08090;
  --text-faint:       #C0A0AA;
  --accent:           #702030;
  --accent-nav:       #702030;
  --accent-hover:     #8B2840;
  --border:           rgba(26, 8, 16, 0.08);
  --border-mid:       rgba(26, 8, 16, 0.12);
  --border-accent:    rgba(112, 32, 48, 0.2);
  --logo-fill:        #702030;
  --logo-bg:          #FFFFFF;  /* fondo blanco en light */
  --num-color:        rgba(112, 32, 48, 0.25);
  --thumb-bg:         #E0D8D2;
  --thumb-bg-alt:     #D4CCC6;
  --ticker-bg:        #EDE8E2;
  --ticker-accent:    #000000;
  --hero-line:        #702030;
  --hero-eyebrow:     #702030;
  --hero-text:        #702030;
  --hero-muted:       #7A5A64;
  --hero-meta:        #A08090;
  --hero-border:      rgba(112, 32, 48, 0.2);
  --hero-btn-bg:      transparent;
  --hero-btn-border:  #702030;
  --hero-btn-hover:   white;
  --footer-text:      #F0EAE8;
  --footer-muted:     rgba(240, 234, 232, 0.65);
  --footer-muted-dim: rgba(240, 234, 232, 0.4);
  --footer-border:    rgba(240, 234, 232, 0.15);
}