/*
  Tokens · Fisios Islas21 (demo)
  ==============================
  Solo custom properties. Los valores salen literales de
  `diseno/design-system.md` (destilado de los artboards aprobados), no de
  criterio propio. No hay reglas de selector aquí: eso vive en base.css y
  componentes.css.
*/

:root {
  /* -------------------------------------------------------------------
     Color — dirección de arte «Consulta de luz».
     Reglas que no se rompen (ver design-system.md §1.2 y CLAUDE.md):
     el menta se usa en grande, la salvia solo dibuja, el índigo es el
     único color saturado y va reservado a la acción, nunca blanco sobre
     foto/salvia/menta/melocotón/salvia-claro, y el gris secundario es
     #676B6C — nunca #A9A7A7.
     ------------------------------------------------------------------- */
  --color-blanco: #FFFFFF;
  --color-tinta: #534F4F;
  --color-menta: #E0F1EF;
  --color-salvia-claro: #CCDCDA;
  --color-salvia: #98B9B4;
  --color-melocoton: #F4C5A2;
  --color-indigo: #2E37A4;
  --color-indigo-hover: #232A80;
  --color-gris-secundario: #676B6C;
  --color-carbon-demo: #2B2B2B;

  /* Verde de WhatsApp (botón flotante DUMMY, Emilio 2026-09-16). Medido, no
     supuesto: el verde de marca #25D366 sobre blanco da 1,98:1 y el glifo
     blanco sobre ese verde, otro 1,98:1 — el par de la marca, que es el que
     todo el mundo reconoce. Lo que separa el componente del fondo es el anillo
     en verde oscuro #128C7E (4,14:1 sobre blanco). El elemento es `inert` y no
     es un control de interfaz, así que 1.4.11 no le aplica como tal; el anillo
     está igualmente para que se distinga del blanco de la página. */
  /* Rojo de alerta: solo el anillo de velocidad de la web actual en /propuesta/.
     Medido: 6,54:1 sobre blanco y 4,61:1 sobre salvia claro, los dos fondos donde
     aparece. No se usa en ninguna otra parte del sitio. */
  --color-alerta: #B3261E;
  --color-whatsapp: #25D366;
  --color-whatsapp-borde: #128C7E;

  /* Sombra del texto de placeholder de formulario: gris secundario
     aprobado, NUNCA el #A9A7A7 del mockup (falla AA, ver hallazgo en
     design-system.md §1.2 y §2.17). */
  --color-placeholder: var(--color-gris-secundario);

  /* -------------------------------------------------------------------
     Tipografía — Poppins autoalojada, tres pesos.
     ------------------------------------------------------------------- */
  --fuente-base: Poppins, "Poppins Fallback", "Segoe UI", system-ui, sans-serif;
  --peso-ligero: 300;
  --peso-medio: 500;
  --peso-fuerte: 600;

  --interletra-titulares: -0.01em;      /* h1/h2/h3, regla global de los 6 artboards */
  --interletra-antetitulo-escritorio: .16em;
  --interletra-antetitulo-movil: .15em;
  --interletra-paso: .14em;             /* antetítulo "01/02/03" */

  --lh-ajustado: 1.06;                  /* H1 hero escritorio */
  --lh-titular: 1.18;
  --lh-cuerpo: 1.6;                     /* línea base heredada por defecto */
  --lh-hero-parrafo: 1.55;

  /* -------------------------------------------------------------------
     Escala de espaciado — base de 4px. Los paddings de cada componente
     son en su mayoría verbatim del mockup (no todos caen en esta rejilla:
     ver design-system.md §1.5), así que esta escala es vocabulario de
     apoyo para gaps y márgenes de uso general, no una malla obligatoria.
     ------------------------------------------------------------------- */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 24px;
  --espacio-7: 32px;
  --espacio-8: 40px;
  --espacio-9: 48px;
  --espacio-10: 56px;
  --espacio-11: 64px;
  --espacio-12: 80px;

  /* Contenedor y ritmo horizontal de sección (§1.5, sin excepción en
     ninguna de las páginas de escritorio). En móvil el horizontal es
     16px constante. El punto de corte escritorio usado en los @media de
     base.css/componentes.css es 960px (fijo, no hay custom property de
     breakpoint: los navegadores no las evalúan dentro de @media). */
  --ancho-contenedor: 1120px;
  --seccion-x-escritorio: 64px;
  --seccion-x-movil: 16px;

  /* -------------------------------------------------------------------
     Radios — la firma del sistema es la esquina de 100px.
     ------------------------------------------------------------------- */
  --radio-boton: 5px;
  --radio-tarjeta: 8px;
  --radio-firma: 100px;
  --radio-pildora: 999px;
  --radio-checkbox: 3px;

  /* -------------------------------------------------------------------
     Sombra — único uso en todo el sistema: la barra fija inferior móvil.
     ------------------------------------------------------------------- */
  --sombra-barra-fija: 0 -4px 14px rgba(83, 79, 79, .10);

  /* -------------------------------------------------------------------
     Foco visible — accesibilidad de teclado, no viene del mockup (los
     artboards no dibujan estados de foco) pero es obligatorio.
     ------------------------------------------------------------------- */
  --color-foco: var(--color-indigo);
  --ancho-foco: 3px;
  --desfase-foco: 2px;

  /* Altura de la barra fija inferior móvil + su zona seleccionada por el
     sistema (env(safe-area-inset-bottom)); se usa para no tapar el pie. */
  --alto-barra-fija-movil: 68px;
}