/* claro.css - el tema por defecto
   ==========================================================
   Blanco, para trabajar de dia. Es el que define tokens.css, asi que este
   archivo existe para poder equilibrar los temas: si claro vive solo en
   tokens.css y los demas en temas/, cualquiera que los edite tiene que
   recordar que hay uno en otro lado.

   Cargarlo explicitamente no cambia nada, pero deja los nueve juntos.

   Paquete: superficies claras, tipografia del sistema, mucho aire,
   movimiento suave y normal. Sombras muy tenues: sobre blanco no hacen
   falta sombras fuertes.
   ========================================================== */

:root,
[data-tema="claro"] {
  /* --- SUPERFICIES --- */
  --c-fondo:         #ffffff;
  --c-fondo-suave:   #f6f7f9;
  --c-superficie:    #ffffff;
  --c-borde:         #e2e5ea;
  --c-borde-campo:   #8a8a8a;

  /* --- TEXTO --- */
  --c-texto:         #14181f;
  --c-texto-suave:   #5f6875;

  /* --- MARCA Y SENALES ---
     El acento es oscuro porque el texto del boton va en blanco encima. */
  --c-acento:        #1e3a8a;
  --c-acento-texto:  #ffffff;
  --c-foco:          #2563eb;
  --c-error:         #c62828;
  --c-exito:         #0f766e;

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

  /* --- TIPOGRAFIA ---
     La familia del sistema, sin descargar nada. */
  --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 ---
     Sobre blanco la sombra tiene que ser tenue o ensucia. */
  --sombra-suave:    0 4px 14px rgba(15, 20, 30, 0.06);
  --sombra-media:    0 14px 32px rgba(15, 20, 30, 0.10);
  --sombra-fuerte:   0 18px 44px rgba(15, 20, 30, 0.16);
}