/*
 * Los tokens del sistema visual de EPA 360, espejados desde el frontmatter de
 * `_bmad-output/planning-artifacts/ux-designs/ux-EPA-2026-08-20/DESIGN.md`.
 *
 * ESTE ES EL ÚNICO ARCHIVO DEL REPOSITORIO CON UN COLOR, UN TAMAÑO DE LETRA O
 * UN RADIO LITERAL. Fuera de acá —capa base, componentes y vistas— esos tres
 * se escriben siempre con `var(--…)`, y `test/integration/sistema_visual_test.rb`
 * lo verifica en las dos direcciones: que ningún token falte, que ninguno sobre,
 * y que ninguna otra hoja ni ninguna vista decida uno propio. Las medidas de
 * disposición que la espina no tokeniza —el trazo de 1px de un borde, los 2px
 * del anillo de `components.foco`, el tope de lectura— sí viven en la hoja que
 * las usa: no son tokens y no hay nada de qué desincronizarse.
 *
 * `DESIGN.md` es la fuente. Un color nuevo se agrega ahí primero y recién
 * después acá; al revés, la prueba del espejo falla nombrando el token.
 *
 * Los nombres se derivan mecánicamente de la clave del frontmatter, sin tabla
 * de equivalencias: `--color-{clave}`, `--tipo-{rol}-{propiedad}`,
 * `--radio-{clave en minúscula}` y `--espacio-{clave}`. Las cinco propiedades
 * tipográficas se traducen `fontFamily`→`familia`, `fontSize`→`tamano`,
 * `fontWeight`→`peso`, `lineHeight`→`interlinea` y `letterSpacing`→`espaciado`;
 * la clave `DEFAULT` de los radios baja a `default`. Esa es toda la traducción.
 *
 * 66 tokens: 34 colores, 11 roles tipográficos, 6 radios y 15 espaciados.
 */
:root {
  /* Colores — 34.
   *
   * Institucionales (manual de marca §1.1): naranja, blanco, crema y tierra
   * son invariantes y no se renegocian. Los derivados del naranja son el mismo
   * color a otra luminosidad, para alcanzar contraste AA donde el institucional
   * no llega. Las seis variantes de estado vienen en pares fondo + texto, y la
   * suite mide cada par a ≥4.5:1 en cada corrida. */
  --color-naranja: #EC6E31;
  --color-blanco: #FFFFFF;
  --color-crema: #F6F2EB;
  --color-tierra: #907A63;
  --color-naranja-oscuro: #B4541F;
  --color-naranja-tenue: #FBE4D6;
  --color-naranja-borde: #F2D9C6;
  --color-tinta: #2A2521;
  --color-tinta-media: #5D5449;
  --color-tinta-suave: #6B6259;
  --color-fondo: #E9E3D9;
  --color-superficie: #FFFFFF;
  --color-superficie-crema: #F6F2EB;
  --color-superficie-alta: #F7F4EE;
  --color-linea: #EAE3D8;
  --color-linea-fuerte: #D9D0C2;
  --color-modulo-0: #000000;
  --color-modulo-1: #8B2E2E;
  --color-modulo-2: #2B5C7A;
  --color-modulo-3: #D45A22;
  --color-modulo-4: #C98A3A;
  --color-modulo-4-pantalla: #A86F28;
  --color-ok: #2F6B3D;
  --color-ok-fondo: #E8F1E9;
  --color-porvencer: #7A5D20;
  --color-porvencer-fondo: #F4ECDC;
  --color-atencion: #A34A18;
  --color-atencion-fondo: #FBE4D6;
  --color-vencido: #8B2E2E;
  --color-vencido-fondo: #F6E4E4;
  --color-neutro: #6B6259;
  --color-neutro-fondo: #F0EAE1;
  --color-info: #3C5D73;
  --color-info-fondo: #E9EEF2;

  /* Tipografía — 11 roles.
   *
   * Quicksand como familia exclusiva (manual §1.3). El piso de lectura es 13px
   * (`cuerpo-sm`); 12px queda para `etiqueta` y 11px exclusivamente para
   * `pill`. */
  --tipo-titulo-familia: Quicksand;
  --tipo-titulo-tamano: 26px;
  --tipo-titulo-peso: 700;
  --tipo-titulo-interlinea: 1.25;
  --tipo-titulo-espaciado: -0.01em;

  --tipo-titulo-sm-familia: Quicksand;
  --tipo-titulo-sm-tamano: 20px;
  --tipo-titulo-sm-peso: 700;
  --tipo-titulo-sm-interlinea: 1.3;

  --tipo-seccion-familia: Quicksand;
  --tipo-seccion-tamano: 15px;
  --tipo-seccion-peso: 700;
  --tipo-seccion-interlinea: 1.4;

  --tipo-cuerpo-familia: Quicksand;
  --tipo-cuerpo-tamano: 15px;
  --tipo-cuerpo-peso: 500;
  --tipo-cuerpo-interlinea: 1.55;

  --tipo-cuerpo-sm-familia: Quicksand;
  --tipo-cuerpo-sm-tamano: 13px;
  --tipo-cuerpo-sm-peso: 500;
  --tipo-cuerpo-sm-interlinea: 1.5;

  --tipo-dato-familia: Quicksand;
  --tipo-dato-tamano: 17px;
  --tipo-dato-peso: 700;
  --tipo-dato-interlinea: 1.2;

  --tipo-etiqueta-familia: Quicksand;
  --tipo-etiqueta-tamano: 12px;
  --tipo-etiqueta-peso: 700;
  --tipo-etiqueta-interlinea: 1.4;
  --tipo-etiqueta-espaciado: 0.04em;

  --tipo-pill-familia: Quicksand;
  --tipo-pill-tamano: 11px;
  --tipo-pill-peso: 700;
  --tipo-pill-interlinea: 1.4;

  --tipo-boton-familia: Quicksand;
  --tipo-boton-tamano: 15px;
  --tipo-boton-peso: 700;
  --tipo-boton-interlinea: 1;

  --tipo-boton-fisico-familia: Quicksand;
  --tipo-boton-fisico-tamano: 17px;
  --tipo-boton-fisico-peso: 700;
  --tipo-boton-fisico-interlinea: 1;

  --tipo-codigo-familia: Quicksand;
  --tipo-codigo-tamano: 28px;
  --tipo-codigo-peso: 700;
  --tipo-codigo-interlinea: 1;
  --tipo-codigo-espaciado: 0.08em;

  /* Radios — 6. `full` es para avatares e indicadores circulares únicamente:
   * forma pastilla en un control lo hace leer como app de consumo, y EPA 360
   * es una herramienta de trabajo. */
  --radio-sm: 5px;
  --radio-default: 9px;
  --radio-md: 9px;
  --radio-lg: 12px;
  --radio-xl: 16px;
  --radio-full: 9999px;

  /* Espaciado — 15. La escala es múltiplo de `unit` (4px); `toque-minimo` y
   * `toque-fisico` son el piso táctil sentado y de pie. */
  --espacio-unit: 4px;
  --espacio-0-5: 2px;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-10: 40px;
  --espacio-margen-telefono: 16px;
  --espacio-margen-escritorio: 32px;
  --espacio-gutter: 16px;
  --espacio-toque-minimo: 44px;
  --espacio-toque-fisico: 56px;

  /* La única sombra del sistema, tomada de `components.aviso.sombra`. No es
   * uno de los 66 tokens del espejo —no vive en ninguna de las cuatro
   * familias— pero sí es un valor literal, y por eso vive acá y no en la hoja
   * de componentes. */
  --sombra-flotante: 0 -1px 12px rgba(42,37,33,0.06);
}