/*
 * Tokens del sistema «Impulso» (decisión T-10, informe de la fase 1a §6.3).
 *
 * Es la única fuente de valores de la interfaz: colores, tipografía, radios,
 * espaciados y tamaños. Los componentes (componentes.css) solo usan estas
 * variables, nunca valores sueltos.
 *
 * Reglas del sistema que dependen de estos valores:
 *   - El lima solo lleva texto tinta (14:1). Sobre blanco no tiene contraste,
 *     así que nunca se usa como color de texto ni de borde.
 *   - Ningún color va solo: los semáforos llevan siempre icono y texto.
 *   - Bordes de campo a 3:1 como mínimo (WCAG 1.4.11); texto a 4.5:1 (1.4.3).
 *
 * Las fuentes están autoalojadas en /static/fuentes (licencia OFL). No hay
 * ningún recurso externo.
 */

/* ------------------------------------------------------------------ */
/* Fuentes autoalojadas                                                */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/sora-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/sora-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/sora-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/sora-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/figtree-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/figtree-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/figtree-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/figtree-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Marca */
  --color-violeta: #5B3DF5;        /* acciones principales */
  --color-profundo: #2A1B7A;       /* títulos y menú */
  --color-lima: #C6F36B;           /* logros; SOLO con texto tinta */
  --color-suave: #ECE8FF;          /* superficies secundarias */
  --color-lavanda: #F5F3FF;        /* fondo de la aplicación */
  --color-blanco: #FFFFFF;

  /* Texto */
  --color-tinta: #17142B;          /* texto principal (y único texto sobre lima) */
  --color-secundario: #5A5575;     /* texto secundario */

  /* Bordes */
  --color-borde: #E3DFF7;          /* tarjetas, tablas, separadores */
  --color-borde-campo: #8E86B5;    /* campos de formulario (3:1 sobre blanco) */

  /* Acciones */
  --color-accion: var(--color-violeta);
  --color-accion-hover: var(--color-profundo);
  --color-peligro: #C0262D;
  --color-peligro-hover: #8F1A20;

  /* Semáforos: texto + fondo. Siempre acompañados de icono y texto. */
  --semaforo-en-plazo-texto: #13795B;
  --semaforo-en-plazo-fondo: #DFF7EC;
  --semaforo-justo-texto: #8A5300;
  --semaforo-justo-fondo: #FFF1D6;
  --semaforo-riesgo-texto: #C0262D;
  --semaforo-riesgo-fondo: #FFE5E7;
  --semaforo-info-texto: #2A1B7A;
  --semaforo-info-fondo: #ECE8FF;
  --semaforo-neutro-texto: #5A5575;
  --semaforo-neutro-fondo: #EFEDF7;

  /* Tipografía: Sora 600/700 para títulos y cifras (tabulares), Figtree 400-700 para texto */
  --fuente-titulos: "Sora", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --texto-xs: 0.8125rem;
  --texto-s: 0.9375rem;
  --texto-m: 1rem;
  --texto-l: 1.125rem;
  --titulo-4: 1.0625rem;
  --titulo-3: 1.25rem;
  --titulo-2: 1.5rem;
  --titulo-1: 1.875rem;
  --cifra-grande: 2rem;
  --interlineado: 1.55;
  --interlineado-titulo: 1.25;

  /* Formas */
  --radio-tarjeta: 20px;
  --radio-campo: 12px;
  --radio-pildora: 999px;
  --radio-chip: 1.125rem;          /* chip o semáforo: píldora de una línea; con varias líneas, esquinas redondeadas y no elipse */
  --barra-alto: 14px;

  /* Espaciados */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* Interacción */
  --objetivo-min: 44px;            /* objetivo táctil mínimo */
  --objetivo-firma: 56px;          /* botones de la firma en el móvil */
  --borde-campo-grosor: 2px;
  --foco-color: var(--color-violeta);
  --foco-grosor: 3px;
  --foco-separacion: 2px;

  /* Estructura */
  --ancho-menu: 17rem;
  --ancho-contenido: 80rem;
  --ancho-lectura: 42rem;
  --ancho-acceso: 32rem;
  /* El punto de corte del menú (52em) no puede ser una variable: las consultas de medios no las admiten. */

  /* Elevación */
  --sombra-tarjeta: 0 1px 2px rgba(23, 20, 43, 0.06), 0 6px 20px rgba(42, 27, 122, 0.06);
  --sombra-dialogo: 0 24px 64px rgba(23, 20, 43, 0.28);
  --velo: rgba(23, 20, 43, 0.6);
  --desplazamiento-sombra: rgba(23, 20, 43, 0.2);   /* borde de una caja que aún tiene contenido por ver */
}