/*
  Tokens de diseño de Sensa.
  PROVISIONAL (sección 9 del contexto): cuando llegue el branding final,
  se cambian SOLO aquí. El resto de la app usa estas variables.
*/
:root {
  /* Paleta del manual de identidad (azul profundo tomado del SVG de la app: rgb 11,52,85) */
  --color-azul-profundo: #0B3455;
  --color-azul-medio: #3E8FBF;
  --color-azul-claro: #7FC1E8;
  --color-blanco: #FFFFFF;

  /* Usos (el azul medio y el claro no alcanzan contraste para texto sobre blanco) */
  --c-texto: var(--color-azul-profundo);
  --c-texto-suave: #2E5878;
  --c-fondo: var(--color-blanco);
  --c-superficie: #EEF7FC;              /* tinte del azul claro */
  --c-primario: var(--color-azul-profundo);
  --c-primario-texto: var(--color-blanco);
  --c-secundario: var(--color-azul-claro);
  --c-secundario-texto: var(--color-azul-profundo);
  --c-acento: var(--color-azul-medio);
  --c-borde: var(--color-azul-claro);
  --c-aviso-fondo: #E3F1FA;
  --c-aviso-borde: var(--color-azul-profundo);
  --c-eleccion: var(--color-azul-claro);  /* el círculo "mi elección" */

  /* Grises del diseño de la app (SVG de referencia) */
  --c-campo: #EEECEC;         /* campos, tarjeta de privacidad, días, barra inferior */
  --c-avatar-vacio: #F0EFEF;  /* círculo "Foto o Avatar" */
  --c-placeholder: #6B6B6B;   /* texto de los campos */
  --c-switch-off: #DED9D9;    /* riel del interruptor apagado */

  /* Tipografías: el diseño de la app usa Atkinson Hyperlegible en todo (regular y bold) */
  --font-titulo: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-cuerpo: "Atkinson Hyperlegible", system-ui, sans-serif;

  /* Animación */
  --ease-suave: cubic-bezier(.22, .8, .2, 1);
  --ease-rebote: cubic-bezier(.34, 1.56, .64, 1);

  /* Tamaños (letra grande por accesibilidad) */
  --text-base: 1.25rem;
  --text-pequeno: 1.1rem;
  --text-grande: 1.55rem;
  --text-titulo: 2rem;
  --text-frase: clamp(1.8rem, 5vw, 2.6rem);

  /* Espacios y formas */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --radius: 20px;
  --radius-pill: 999px;
  --tap-min: 64px;
  --ancho-max: 720px;
  --borde-grueso: 3px;
}