/* ============================================================
   ENRIPE · Sistema de color "Pizarra y Neón"
   Base compartida por enripe.online y todos los subdominios.
   Para reutilizar en un proyecto nuevo: copia css/ y js/ tal cual.
   ============================================================ */

:root {
  /* ---- Neutros (no tocar) ---------------------------------- */
  --abismo:  #05080F;
  --tinta:   #111A26;
  --pizarra: #222B39;
  --acero:   #383F4F;
  --plomo:   #4E5566;
  --niebla:  #696C7C;
  --ceniza:  #878896;
  --lila:    #A9A3B5;
  --perla:   #C6C1CC;
  --hueso:   #DDD5DD;
  --nacar:   #F1E8ED;

  /* ---- Los 7 colores principales --------------------------- */
  /* sombra (para tema claro) / base (para tema oscuro) / luz    */
  --rojo-sombra:     #A41B1D;  --rojo-base:     #F94140;  --rojo-luz:     #FF8F87;
  --azul-sombra:     #155C8A;  --azul-base:     #02ACFB;  --azul-luz:     #8FD8FF;
  --verde-sombra:    #059B5A;  --verde-base:    #03F67B;  --verde-luz:    #8CF7A8;
  --indigo-sombra:   #2E2B45;  --indigo-base:   #696580;  --indigo-luz:   #A9A3C8;
  --magenta-sombra:  #9E2799;  --magenta-base:  #F84BF5;  --magenta-luz:  #FFA6FB;
  --blanco-sombra:   #8E9099;  --blanco-base:   #F4EEE8;  --blanco-luz:   #FFFFFF;
  --amarillo-sombra: #A6A126;  --amarillo-base: #FBF82A;  --amarillo-luz: #FFFC9E;

  /* ---- Tipografía ------------------------------------------ */
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --body:    "Zen Kaku Gothic New", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Medidas --------------------------------------------- */
  --ancho: 100%;          /* ocupa toda la pantalla */
  --radio: 0px;          /* el estilo es de esquina viva */
  --linea: 2px;         /* grosor de las lineas grises */
}

/* ============================================================
   TEMA OSCURO  (por defecto)
   ============================================================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo:         #111A26;
  --fondo-2:       #05080F;
  --superficie:    #222B39;
  --superficie-2:  #383F4F;
  --borde:         #2C3545;
  --borde-fuerte:  #4E5566;
  --texto:         #DDD5DD;
  --texto-2:       #878896;
  --texto-3:       #4E5566;
  --invertido:     #F1E8ED;
  --sobre-acento:  #05080F;   /* texto encima de un bloque de acento */
  --sombra-caja:   0 0 0 transparent;
  --grano:         0.025;
}

/* ============================================================
   TEMA CLARO
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;
  --fondo:         #DDD5DD;
  --fondo-2:       #C6C1CC;
  --superficie:    #F1E8ED;
  --superficie-2:  #FFFFFF;
  --borde:         #C6C1CC;
  --borde-fuerte:  #A9A3B5;
  --texto:         #111A26;
  --texto-2:       #4E5566;
  --texto-3:       #878896;
  --invertido:     #111A26;
  --sobre-acento:  #F1E8ED;
  --sombra-caja:   0 1px 2px rgba(17,26,38,.08);
  --grano:         0.04;
}

/* Si el navegador prefiere claro y el usuario no ha elegido nada */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --fondo:         #DDD5DD;
    --fondo-2:       #C6C1CC;
    --superficie:    #F1E8ED;
    --superficie-2:  #FFFFFF;
    --borde:         #C6C1CC;
    --borde-fuerte:  #A9A3B5;
    --texto:         #111A26;
    --texto-2:       #4E5566;
    --texto-3:       #878896;
    --invertido:     #111A26;
    --sobre-acento:  #F1E8ED;
    --sombra-caja:   0 1px 2px rgba(17,26,38,.08);
    --grano:         0.04;
  }
}

/* ============================================================
   ACENTO POR SECCIÓN
   Marca cualquier elemento con  data-color="rojo"  (azul, verde,
   indigo, magenta, blanco, amarillo) y dentro de él --acento ya
   vale lo correcto para el tema activo.
   ============================================================ */
:root { --acento: var(--texto-2); --acento-2: var(--texto-3); }

[data-color="rojo"]     { --c-sombra: var(--rojo-sombra);     --c-base: var(--rojo-base);     --c-luz: var(--rojo-luz); }
[data-color="azul"]     { --c-sombra: var(--azul-sombra);     --c-base: var(--azul-base);     --c-luz: var(--azul-luz); }
[data-color="verde"]    { --c-sombra: var(--verde-sombra);    --c-base: var(--verde-base);    --c-luz: var(--verde-luz); }
[data-color="indigo"]   { --c-sombra: var(--indigo-sombra);   --c-base: var(--indigo-base);   --c-luz: var(--indigo-luz); }
[data-color="magenta"]  { --c-sombra: var(--magenta-sombra);  --c-base: var(--magenta-base);  --c-luz: var(--magenta-luz); }
[data-color="blanco"]   { --c-sombra: var(--blanco-sombra);   --c-base: var(--blanco-base);   --c-luz: var(--blanco-luz); }
[data-color="amarillo"] { --c-sombra: var(--amarillo-sombra); --c-base: var(--amarillo-base); --c-luz: var(--amarillo-luz); }

/* Oscuro: el acento es el tono "base" (neón) */
[data-color] { --acento: var(--c-base); --acento-2: var(--c-luz); --acento-apagado: var(--c-sombra); }

/* Claro: el neón cegaría sobre blanco, así que usa el tono "sombra" */
:root[data-theme="light"] [data-color] { --acento: var(--c-sombra); --acento-2: var(--c-sombra); --acento-apagado: var(--c-luz); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) [data-color] { --acento: var(--c-sombra); --acento-2: var(--c-sombra); --acento-apagado: var(--c-luz); }
}