@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════
   AquaCheck — Variables Globales de Diseño (Modo Claro)
   Enlaza este archivo en todas tus pantallas:
   <link rel="stylesheet" href="variables-light.css">
   ═══════════════════════════════════════════════ */

:root {

  /* ── COLORES DE FONDO ──────────────────────────
     De más oscuro (base) a más claro (raised).
     Úsalos en capas: base → surface → raised.     */
  --bg-base:      #f0f6f8;   /* fondo raíz de la app (tono agua muy suave) */
  --bg-surface:   #ffffff;   /* cards, modales, bottom sheets (blanco puro)*/
  --bg-raised:    #eaf2f5;   /* elementos sobre surface (ligero contraste) */
  --bg-overlay:   rgba(10, 42, 58, 0.50); /* overlays (mantiene tono oscuro para oscurecer el fondo) */

  /* ── COLOR DE ACENTO ──────────────────────────
     Aqua/teal: botones principales, FAB, links,
     iconos activos, bordes de foco.               */
  --accent:       #00a896;   /* un poco más oscuro que en dark para contraste sobre blanco */
  --accent-light: #2ec4b6;   /* el color original pasa a ser el highlight   */
  --accent-dim:   rgba(0, 168, 150, 0.10);  /* fondos sutiles  */
  --accent-border:rgba(0, 168, 150, 0.25);  /* bordes suaves   */

  /* ── COLORES DE ESTADO ────────────────────────
     Úsalos para badges, iconos y textos de alerta. */
  --ok:           #2a9d8f;   /* parámetro en rango óptimo     */
  --ok-dim:       rgba(42, 157, 143, 0.12);
  --warn:         #f4a261;   /* parámetro en rango límite (naranja suave, el amarillo no se lee en blanco) */
  --warn-dim:     rgba(244, 162, 97, 0.15);
  --danger:       #e63946;   /* parámetro fuera de rango      */
  --danger-dim:   rgba(230, 57, 70, 0.12);

  /* ── TEXTO ─────────────────────────────────────
     Jerarquía: primary → secondary → disabled.    */
  --text-primary:   #1d3557;          /* azul marino oscuro para títulos y valores */
  --text-secondary: #457b9d;          /* azul medio para subtítulos y meta         */
  --text-disabled:  rgba(29, 53, 87, 0.35); /* placeholders                          */
  --text-accent:    #00a896;          /* links, etiquetas activas                  */
  --text-on-accent: #ffffff;          /* texto sobre botón acento (blanco)         */

  /* ── BORDES Y SEPARADORES ─────────────────────  */
  --border-subtle: rgba(29, 53, 87, 0.08);  /* separadores finos */
  --border-soft:   rgba(29, 53, 87, 0.15);  /* bordes de card    */
  --border-focus:  var(--accent);           /* foco en inputs    */

  /* ── TIPOGRAFÍA ────────────────────────────────
     Display: títulos de sección y nombres.
     Body: texto corriente, etiquetas, botones.    */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --text-xs:   11px;   /* etiquetas, timestamps, badges     */
  --text-sm:   13px;   /* texto secundario, subtítulos      */
  --text-base: 15px;   /* texto corriente                   */
  --text-md:   17px;   /* subtítulos importantes            */
  --text-lg:   21px;   /* títulos de card                   */
  --text-xl:   26px;   /* títulos de pantalla               */
  --text-2xl:  32px;   /* valores numéricos destacados      */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  --leading-tight:  1.1;
  --leading-normal: 1.4;
  --leading-loose:  1.6;

  /* ── ESPACIADO ─────────────────────────────────
     Escala de 4 px. Úsalos como padding/margin/gap. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;

  /* ── RADIOS DE BORDE ───────────────────────────  */
  --radius-sm:   8px;    /* chips, badges, inputs pequeños  */
  --radius-md:   14px;   /* inputs, botones, items de lista */
  --radius-lg:   22px;   /* cards principales               */
  --radius-xl:   32px;   /* bottom sheets, modales          */
  --radius-full: 999px;  /* pills, avatares, FAB circular   */

  /* ── SOMBRAS ───────────────────────────────────
     En modo claro, las sombras deben ser más sutiles 
     y tintadas con el color principal del texto.  */
  --shadow-sm:  0 2px 8px  rgba(29, 53, 87, 0.06);
  --shadow-md:  0 6px 20px rgba(29, 53, 87, 0.08);
  --shadow-lg:  0 12px 36px rgba(29, 53, 87, 0.12);
  --shadow-accent: 0 8px 24px rgba(0, 168, 150, 0.30); /* para el FAB */

  /* ── TRANSICIONES ──────────────────────────────  */
  --ease-default: 0.18s ease;
  --ease-bounce:  0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── DIMENSIONES FIJAS DE LA APP ───────────────  */
  --nav-height:  64px;   /* altura de la barra de navegación inferior */
  --fab-size:    60px;   /* tamaño del botón flotante (FAB)           */
  --header-height: 80px; /* altura aproximada del header de pantalla  */
}