/* ============================================================
   ConCiencia TV — variables.css
   ============================================================
   Colores por EJE TEMÁTICO (11 líneas discursivas).
   Provisionales "al ojo", tomados/mejorados desde YouTube.
   Pendiente: paleta oficial del cliente.

   REGLA: los colores de eje/programa son IDÉNTICOS en light y
   dark mode. Lo único que cambia entre temas es el fondo del
   sitio, navbar, superficies y textos.
   ============================================================ */

:root {
  /* --- Ejes temáticos (saturados, vibrantes) --- */
  --eje-ciencias:             #0e7fd6;
  --eje-tecnologia:           #07b3d4;
  --eje-innovacion:           #07b3d4; /* comparte cyan con tecnología */
  --eje-investigacion:        #1442c4;
  --eje-saberes-academicos:   #6a1fd0;
  --eje-saberes-populares:    #e9690f;
  --eje-saberes-ancestrales:  #0f9c4d;
  --eje-descolonizacion:      #6a1fd0;
  --eje-despatriarcalizacion: #d61f6b;
  --eje-biocentrismo:         #11a85f;
  --eje-artes:                #e8b50c;

  /* --- Programas → heredan del eje. Mapeo provisional. --- */
  --prog-innova:               var(--eje-innovacion);
  --prog-saber-con-ciencia:    var(--eje-saberes-populares);
  --prog-actualizando-datos:   var(--eje-tecnologia);
  --prog-planeta-ya:           var(--eje-biocentrismo);
  --prog-hyper-dual:           var(--eje-investigacion);
  --prog-saberes-ancestrales:  var(--eje-saberes-ancestrales);
  --prog-cosmopedia:           var(--eje-ciencias);
  --prog-maravillas-venezuela: var(--eje-artes);
  --prog-codigo-origen:        var(--eje-descolonizacion);
  --prog-contenidos:           var(--eje-saberes-academicos);

  /* --- Tipografía --- */
  --font-display: "ConCiencia", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Outfit", system-ui, sans-serif;

  /* --- Layout --- */
  --navbar-h: 76px;
  --maxw: 1920px;            /* tope para pantallas 2K+ del presidente */
  --pad-x: clamp(36px, 5vw, 120px);  /* padding horizontal holgado y escalable */
  --pad-y: clamp(36px, 5.5vh, 90px);
  --gap: clamp(18px, 1.6vw, 28px);
  --radius: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-nav: 0 4px 24px rgba(0,0,0,.10);
  --shadow-card: 0 10px 30px rgba(0,0,0,.16);
}

/* ===== TEMA CLARO (default) ===== */
:root,
[data-theme="light"] {
  --bg:           #e9f1f7;
  --bg-alt:       #ffffff;
  --bg-elev:      #ffffff;
  --surface:      #f2f7fb;
  --text:         #0c1f30;
  --text-soft:    #51687a;
  --text-invert:  #ffffff;
  --border:       rgba(12,31,48,.10);
  --navbar-bg:    rgba(233,241,247,.74);
  --navbar-solid: #ffffff;
  --accent:       var(--eje-tecnologia);
  --bar:          #c9d8e4;        /* color de la "vara"/marco neutro */
  --live-bg:      #06121d;
}

/* ===== TEMA OSCURO (optativo) ===== */
[data-theme="dark"] {
  --bg:           #081320;
  --bg-alt:       #0d1c2b;
  --bg-elev:      #102338;
  --surface:      #0e1f2f;
  --text:         #e9f2f9;
  --text-soft:    #8ba6bb;
  --text-invert:  #ffffff;
  --border:       rgba(233,242,249,.12);
  --navbar-bg:    rgba(8,19,32,.74);
  --navbar-solid: #0d1c2b;
  --accent:       var(--eje-tecnologia);
  --bar:          #1b3146;
  --live-bg:      #040d16;
}