/* ============================================================
   PALETA · dos temas sobre los mismos tokens
   ------------------------------------------------------------
   :root                     = NOCHE (el de siempre; sigue siendo el que manda
                               cuando el usuario no eligió nada).
   html[data-tema="dia"]     = DÍA: la misma paleta dada vuelta — el fondo va
                               hacia el oro y la tipografía hacia el negro.

   Los colores que aparecen con transparencia viven partidos en canales
   (--*-rgb) para que el rgba() de cada regla no tenga que repetirse por tema:
   se escribe rgba(var(--oro-rgb), 0.18) una sola vez y cambia con el tema.
   Regla al tocar el CSS: NINGÚN color literal fuera de este bloque.
   ============================================================ */
:root {
  color-scheme: dark;

  /* Acento */
  --oro-rgb: 201,168,76;
  --oro-claro-rgb: 245,217,122;
  --dorado: #c9a84c;
  --dorado-claro: #f5d97a;
  --dorado-suave: rgba(var(--oro-rgb),0.12);

  /* Superficies, de la más honda a la más elevada */
  --fondo-hondo: #0a1020;      /* hundido: barra de pestañas, campos, conmutadores */
  --fondo: #0d1424;            /* el lienzo */
  --superficie: #131c33;       /* tarjetas */
  --superficie-alta: #161f3a;  /* tope de las tarjetas en degradé */
  --fondo-rgb: 13,20,36;
  --fondo-hondo-rgb: 10,16,32;
  --velo-rgb: 255,255,255;     /* vela los bloques sutiles: aclara sobre oscuro */
  --sombra-rgb: 0,0,0;

  /* Tipografía */
  --texto: #f0eada;
  --texto-rgb: 240,234,214;
  /* Contraste subido (2026-08-26, borrador a revisión del autor): antes 0.65 / 0.4 —
     en el cascarón iOS el texto fino sobre azul quedaba corto de cuerpo */
  --texto-suave: rgba(var(--texto-rgb),0.78);
  --texto-tenue: rgba(var(--texto-rgb),0.55);

  /* Estados: viento a favor / calmo / en contra, semáforo, eclipse */
  --verde: #58b370;
  --verde-hondo: #4a8c5c;
  --verde-texto: #8fd0a0;
  --verde-vivo: #7fc794;
  --verde-etiqueta: #7fb98f;
  --verde-rgb: 88,179,112;
  --verde-hondo-rgb: 74,140,92;
  --ambar: #d9a92c;
  --ambar-texto: #e4bd4d;
  --ambar-rgb: 217,169,44;
  --rojo: #c46a6a;
  --rojo-vivo: #d95c5c;
  --rojo-texto: #e07a7a;
  --rojo-suave: #e59a9a;
  --rojo-alerta: #e05555;
  --rojo-hondo: #b07070;
  --rojo-barra: #b06060;
  --rojo-rgb: 196,106,106;
  --rojo-vivo-rgb: 217,92,92;
  --rojo-alerta-rgb: 224,85,85;
  --naranja: #d08a4a;
  --naranja-texto: #e6ab72;
  --naranja-claro: #f0c9a0;
  --naranja-vivo: #ffb35c;
  --naranja-rgb: 230,140,60;
  --naranja-hondo-rgb: 208,138,74;
  --purpura: #7c5cbf;
  --purpura-claro: #b39ddb;
  --purpura-rgb: 124,92,191;
  --purpura-hondo-rgb: 91,63,160;

  /* Rueda natal · las lee chart_render.js con getComputedStyle */
  --rueda-borde: rgba(var(--oro-rgb),0.55);
  --rueda-borde-suave: rgba(var(--oro-rgb),0.25);
  --rueda-texto-glifo: var(--dorado-claro);
  --rueda-texto-grado: rgba(var(--texto-rgb),0.55);
  --rueda-texto-signo: rgba(var(--texto-rgb),0.75);
  --rueda-axis: var(--dorado);
  --rueda-planeta: var(--texto);
  --rueda-retrogrado: var(--rojo);
  --rueda-linea-glifo: rgba(var(--oro-rgb),0.4);
  --rueda-aspecto-armonico: var(--verde-hondo);
  --rueda-aspecto-tenso: var(--rojo-hondo);
  --rueda-aspecto-neutro: rgba(var(--oro-rgb),0.5);
  --rueda-aspecto-armonico-vivo: #4eaa6f;
  --rueda-aspecto-tenso-vivo: #d06868;
  --rueda-fondo: var(--fondo);
  --rueda-proluna: var(--purpura-claro);

  /* Tendencia de 30 días · la lee satelite_render.js (hoy desactivada) */
  --tendencia-guia: rgba(var(--oro-rgb),0.1);
  --tendencia-guia-tenue: rgba(var(--oro-rgb),0.08);
  --tendencia-rotulo: rgba(var(--texto-rgb),0.5);
  --tendencia-linea: var(--dorado);
  --tendencia-cabeza: var(--dorado-claro);
}

/* ============================================================
   MODO DIURNO · la misma paleta al revés
   El fondo toma el oro y la tipografía va al negro (un negro cálido,
   no el #000: el gris del oro tiene que seguir sonando). Los acentos
   —oro, verdes, rojos, naranjas— bajan de luminosidad lo necesario
   para leerse sobre crema, conservando su lugar relativo: el que en
   la noche resalta más, en el día es el más oscuro.
   ============================================================ */
html[data-tema="dia"] {
  color-scheme: light;

  --oro-rgb: 122,92,18;
  --oro-claro-rgb: 92,70,12;
  --dorado: #7a5c12;
  --dorado-claro: #5c460c;
  --dorado-suave: rgba(var(--oro-rgb),0.12);

  --fondo-hondo: #e7d9b6;
  --fondo: #f2e6cb;
  --superficie: #faf3e2;
  --superficie-alta: #fffbf0;
  --fondo-rgb: 242,230,203;
  --fondo-hondo-rgb: 231,217,182;
  --velo-rgb: 122,92,18;       /* acá el velo tiñe de oro en vez de aclarar */
  --sombra-rgb: 90,66,14;      /* sombra cálida: el negro puro ensucia el crema */

  --texto: #1a1409;
  --texto-rgb: 26,20,9;
  /* Sobre claro el texto fino se pierde antes que sobre oscuro: los dos
     escalones van un punto más firmes que en la noche (0.78 / 0.55). */
  --texto-suave: rgba(var(--texto-rgb),0.82);
  --texto-tenue: rgba(var(--texto-rgb),0.62);

  --verde: #2f7a48;
  --verde-hondo: #2b6b40;
  --verde-texto: #22603a;
  --verde-vivo: #2a6e42;
  --verde-etiqueta: #316b47;
  --verde-rgb: 47,122,72;
  --verde-hondo-rgb: 43,107,64;
  --ambar: #9a7410;
  --ambar-texto: #7d5c08;
  --ambar-rgb: 154,116,16;
  --rojo: #a33636;
  --rojo-vivo: #b32d2d;
  --rojo-texto: #993030;
  --rojo-suave: #8f3232;
  --rojo-alerta: #c02020;
  --rojo-hondo: #963939;
  --rojo-barra: #9c3838;
  --rojo-rgb: 163,54,54;
  --rojo-vivo-rgb: 179,45,45;
  --rojo-alerta-rgb: 192,32,32;
  --naranja: #a35c14;
  --naranja-texto: #8f4f10;
  --naranja-claro: #7a430c;
  --naranja-vivo: #a85c00;
  --naranja-rgb: 179,102,20;
  --naranja-hondo-rgb: 163,92,20;
  --purpura: #5a3d9e;
  --purpura-claro: #4a3184;
  --purpura-rgb: 90,61,158;
  --purpura-hondo-rgb: 74,49,132;

  --rueda-aspecto-armonico-vivo: #1f7a45;
  --rueda-aspecto-tenso-vivo: #a83030;
  --rueda-fondo: var(--superficie);
  /* Los grados y los números de casa son tipografía chica dentro de la rueda:
     sobre crema necesitan más cuerpo que sobre el azul de la noche. */
  --rueda-texto-grado: rgba(var(--texto-rgb),0.68);
  --rueda-texto-signo: rgba(var(--texto-rgb),0.85);
}