/* =====================================================================
   LUMEN · Archivo de diseño central
   ---------------------------------------------------------------------
   Este es el ÚNICO sitio donde se decide el aspecto de la app y de la web.
   Cambia un valor aquí y cambia en todas partes.

   Cómo editarlo sin programar:
   - Colores: cambia el código hexadecimal (#10069F). Puedes elegirlos en
     https://htmlcolorcodes.com y pegar el código.
   - Tamaños: px = píxeles. Más número, más grande.
   - Si algo se rompe, en GitHub puedes volver a la versión anterior.
   ===================================================================== */

:root {
  /* =========== PALETA: pastel mate =========== 
     Cuatro protagonistas, todos mates y suaves:
     hueso/crema (fondos), gris mate (detalles), azul cielo (acentos suaves) y azul marino (texto y botones). */

  /* ---------- Los cuatro colores base ---------- */
  --hueso: #F4F0E8;          /* Blanco hueso-crema: fondo de toda la app */
  --hueso-2: #ECE7DC;        /* Hueso más hondo: zonas agrupadas, pistas */
  --crema: #FBF9F5;          /* Crema casi blanca: tarjetas */
  --gris-mate: #CDC9C0;      /* Gris mate: bordes, iconos apagados, marcos */
  --gris-mate-2: #9E9B93;    /* Gris mate oscuro: textos de apoyo */
  --cielo: #BBD3E8;          /* Azul cielo pastel: acentos, rellenos */
  --cielo-2: #DCE8F3;        /* Azul cielo muy suave: fondos activos, chips */
  --cielo-3: #8DB2D6;        /* Azul cielo intenso (aún mate): gráficos */
  --marino: #2D3B5C;         /* Azul marino mate: botones, títulos con peso */
  --marino-2: #43567E;       /* Marino algo más claro: hover, segundas series */

  /* ---------- Nombres que usa la app (apuntan a la paleta) ---------- */
  --marca: var(--marino);
  --marca-hover: #1F2A44;
  --marca-profundo: #1F2A44;
  --azul-medio: var(--cielo-3);
  --azul-pastel: var(--cielo-2);
  --azul-pastel-2: var(--cielo);
  --luz: #F3E3B5;            /* Brillo cálido del reloj (solo en la web) */

  --acero: #C4C0B7;
  --gris-claro: #E3DED3;
  --gris-medio: var(--gris-mate-2);

  /* ---------- Secciones (todas dentro de la paleta) ---------- */
  --estudio: var(--cielo-2);   --estudio-fuerte: var(--marino);
  --nutricion: #E4EDF2;        --nutricion-fuerte: #4F7392;
  --deporte: #DDE6F0;          --deporte-fuerte: #3D5A86;
  --diario: var(--hueso-2);    --diario-fuerte: #6B6860;
  --personal: #E2EBF4;         --personal-fuerte: #34507A;

  /* ---------- Neutros ---------- */
  --fondo: var(--hueso);
  --fondo-2: var(--hueso-2);
  --superficie: var(--crema);
  --linea: #E3DED3;
  --tinta: #1D2538;          /* Texto principal: marino casi negro */
  --tinta-2: #5A6070;        /* Texto secundario */
  --tinta-3: #9A9A96;        /* Texto de apoyo */

  /* ---------- Estados (verde y rojo mates, solo hábitos y avisos) ---------- */
  --ok: #4E9576;      --ok-suave: #E1EEE6;
  --error: #C2615E;   --error-suave: #F5E3E0;
  --aviso: #9A7A33;

  /* ---------- Tipografía: la del sistema (SF Pro en Apple) con Inter de respaldo ---------- */
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulo: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ancho-titulo: 100%;      /* Anchura normal, como apple.com */
  --ancho-texto: 100%;

  --t-gigante: clamp(48px, 9vw, 112px);  /* Portada de la web */
  --t-titulo: 34px;
  --t-subtitulo: 22px;
  --t-cuerpo: 16px;
  --t-pequeno: 13px;

  --peso-titulo: 800;
  --peso-texto: 400;
  --peso-medio: 600;

  /* ---------- Forma ---------- */
  --r-grande: 24px;          /* Tarjetas grandes */
  --r-medio: 14px;           /* Botones y campos */
  --r-pildora: 999px;        /* Chips y etiquetas */

  /* ---------- Espaciado (escala de 4 en 4) ---------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px;

  /* ---------- Movimiento ---------- */
  --rapido: 160ms;           /* Pulsar, marcar */
  --medio: 320ms;            /* Abrir, cambiar de pantalla */
  --lento: 700ms;            /* Solo en la web de presentación */
  --curva: cubic-bezier(.25, .1, .25, 1);           /* La curva por defecto de Apple */
  --curva-salida: cubic-bezier(.2, .8, .2, 1);            /* Salida suave, estilo Apple */
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1); /* Rebote del check */

  color-scheme: light;
}

/* Si el usuario tiene desactivadas las animaciones en su móvil, se respetan */
@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --medio: 0ms; --lento: 0ms; }
}