/* oscuro.css - el estandar de la noche
   ==========================================================
   Gris muy oscuro, no negro puro. Y el texto NO es blanco puro: el blanco
   sobre negro produce halo y cansa la vista. Es el detalle que casi nadie
   aplica y que separa un tema oscuro usable de uno que marea.

   Paquete: superficies grises, acento azul claro (el oscuro no se veria),
   aire normal, mismo movimiento.
   ========================================================== */

[data-tema="oscuro"] {
  /* --- SUPERFICIES ---
     #0d1117 no es negro: tiene un poco de azul, que es lo que lo hace
     descansado a la vista. */
  --c-fondo:         #0d1117;
  --c-fondo-suave:   #161b22;
  --c-superficie:    #161b22;
  --c-borde:         #262c36;
  --c-borde-campo:   #6b6b6b;

  /* --- TEXTO ---
     Gris muy claro en vez de blanco. */
  --c-texto:         #e6edf3;
  --c-texto-suave:   #9198a1;

  /* --- MARCA Y SENALES ---
     El azul #1e3a8a del tema claro aqui desaparece: sobre fondo oscuro hay
     que aclarar el acento para que el boton se vea. */
  --c-acento:        #4f8cff;
  --c-acento-texto:  #06101f;
  --c-foco:          #6ba1ff;
  --c-error:         #ff7b72;
  --c-exito:         #56d4b0;

  /* --- MEDIDAS --- */
  --radio:           10px;
  --radio-chico:     8px;
  --hueco:           20px;
  --hueco-seccion:   clamp(56px, 8vw, 96px);

  /* --- TIPOGRAFIA --- */
  --fuente-texto:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --linea-normal:    1.6;

  /* --- MOVIMIENTO --- */
  --t-normal:        250ms;
  --ease-salida:     cubic-bezier(0.22, 1, 0.36, 1);

  /* --- SOMBRAS ---
     En oscuro la sombra tiene que ser mas negra y mas marcada, o no se
     distingue del fondo. */
  --sombra-suave:    0 4px 14px rgba(0, 0, 0, 0.40);
  --sombra-media:    0 14px 32px rgba(0, 0, 0, 0.50);
  --sombra-fuerte:   0 18px 44px rgba(0, 0, 0, 0.60);
}