/*
 * prepagos.cl y prepagoslatam.com — tokens de marca.
 * Fuente única de colores, letra, tamaños, radios y sombras.
 * Regla: en el sitio no se escribe ningún color, tamaño ni fuente a mano; siempre se usa una variable de este archivo.
 */

@font-face {
  font-family: 'Host Grotesk';
  src: url('../fuentes/HostGrotesk-Variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color de marca */
  --pp-ultramar: #2B44E8;          /* vale, botones, oferta destacada, enlaces, mejor precio */
  --pp-ultramar-tinta: #1A2A9A;    /* texto ultramar sobre fondos ultramar claros */
  --pp-ultramar-claro: #EEF1FE;    /* fondos de sección, fichas de rubro, píldoras */
  --pp-ultramar-suave: #DCE2FD;    /* barras de precio secundarias, bordes suaves */

  /* Neutros */
  --pp-tinta: #131417;             /* texto principal */
  --pp-grafito: #55575E;           /* texto de apoyo: fuentes, horas, notas */
  --pp-papel: #FAFAF7;             /* fondo de página */
  --pp-blanco: #FFFFFF;            /* tarjetas y superficies */
  --pp-linea: #E6E4DD;             /* bordes y divisores decorativos */
  --pp-control: #8E8B84;           /* bordes de campos y filtros (contraste 3:1) */

  /* Estados: solo para formularios y avisos del sistema */
  --pp-error: #B42318;
  --pp-aviso: #8A5A00;

  /* Roles: usar estos nombres en los componentes */
  --pp-fondo: var(--pp-papel);
  --pp-superficie: var(--pp-blanco);
  --pp-texto: var(--pp-tinta);
  --pp-texto-apoyo: var(--pp-grafito);
  --pp-accion: var(--pp-ultramar);
  --pp-sobre-accion: var(--pp-blanco);
  --pp-enlace: var(--pp-ultramar);

  /* Letra: una familia, dos pesos */
  --pp-fuente: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pp-peso-normal: 400;
  --pp-peso-medio: 500;

  /* Escala de tamaños: siete en total; cada pantalla usa seis como máximo */
  --pp-t-nota: 0.875rem;                                  /* 14 px: fuentes, horas, notas */
  --pp-t-texto: 1rem;                                     /* 16 px: texto y botones */
  --pp-t-destacado: 1.25rem;                              /* 20 px: bajadas y títulos de tarjeta */
  --pp-t-precio: clamp(1.25rem, 1rem + 1vw, 1.75rem);     /* 20 → 28 px: precios en listas */
  --pp-t-titulo-2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);  /* 28 → 40 px */
  --pp-t-titulo-1: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);  /* 40 → 60 px */
  --pp-t-precio-grande: clamp(2.75rem, 2rem + 2.6vw, 4rem); /* 44 → 64 px: solo el precio de la oferta destacada */
  --pp-interlinea: 1.5;
  --pp-interlinea-titulo: 1.04;
  --pp-tracking-titulo: -0.035em;

  /* Espacios */
  --pp-e-1: 4px;  --pp-e-2: 8px;  --pp-e-3: 12px; --pp-e-4: 16px;
  --pp-e-5: 24px; --pp-e-6: 32px; --pp-e-7: 48px; --pp-e-8: 64px; --pp-e-9: 96px;

  /* Radios */
  --pp-radio-control: 12px;
  --pp-radio-tarjeta: 20px;
  --pp-radio-destacada: 28px;
  --pp-radio-pildora: 999px;

  /* Sombras */
  --pp-sombra-1: 0 12px 30px -18px rgba(19, 20, 23, .25);
  --pp-sombra-destacada: 0 30px 60px -30px rgba(19, 20, 23, .45);

  /* Medidas */
  --pp-ancho-max: 1200px;
  --pp-margen-pagina: clamp(18px, 4vw, 32px);
  --pp-tactil-min: 44px;
}