/* HyperForge by Riverstar · tokens del diseño v2 (ronda v9, 12-nov-2026). Fuente de verdad: el handoff de diseño
   (D:\tmp\diseno-v2\handoff\tokens.css). Mismos hex, con dos ajustes medidos para AA (core/tests/test_ui_tokens_rds.py):
     1. Variantes *-texto: brasa, verdín y rojo cuando son TEXTO normal sobre fondo, panel o panel-2 (el hex del handoff sirve para
        rellenos, bordes y texto grande; como texto chico no llega a 4.5:1 en algunos fondos).
     2. Claro: la brasa de RELLENO (botón principal, contadores) es #c2470c en vez de #d4500f, porque su texto #fff6ee sobre
        #d4500f da 3.97:1. Pendiente de aprobar por diseño.
   Carbón y marfil; brasa = acción y atención; verdín = verificado; rojo SOLO para fallas. Sin degradados ni vidrio.
   Oscuro por omisión; claro si el sistema lo pide, salvo [data-theme="dark"]; [data-theme="light"] lo fuerza.
   Las pantallas usan --hf-*; los nombres cortos del handoff (--bg, --wow, --ok…) quedan como alias para copiar su CSS.
   Fuentes autoalojadas: Clash Display y Switzer (ITF FFL, ver fuentes/itf-ffl-clash-display-switzer.txt); Geist Mono (OFL). */
@font-face{font-family:"Switzer";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/switzer-400.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/switzer-500.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/switzer-600.woff2) format("woff2")}
@font-face{font-family:"Clash Display";font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/clash-display-500.woff2) format("woff2")}
@font-face{font-family:"Clash Display";font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/clash-display-600.woff2) format("woff2")}
@font-face{font-family:"Clash Display";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/clash-display-700.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/geist-mono-latin-500-normal.woff2) format("woff2")}

:root{
  /* Colores · carbón (oscuro, por omisión) */
  --hf-fondo:#0b0908; --hf-panel:#141110; --hf-panel-2:#1c1917; --hf-texto:#f3ebdd; --hf-tenue:#a89f92;
  --hf-linea-fuerte:#716960; --hf-brasa:#ff7a2f; --hf-brasa-texto:#ff7a2f; --hf-sobre-brasa:#1a0b02;
  --hf-verdin:#4fd1b5; --hf-verdin-texto:#4fd1b5; --hf-sobre-verdin:#06140f;
  --hf-alerta:#e63946; --hf-alerta-texto:#f0505c; --hf-sobre-alerta:#1a0505; --hf-foco:#ff7a2f;
  --hf-logo-b:#4fd1b5; --hf-logo-1:#a6ebdb; --hf-logo-2:#4fd1b5; --hf-logo-3:#1e7f6d;
  --hf-linea:rgba(243,235,221,.11); --hf-linea-2:rgba(243,235,221,.24); --hf-velo:rgba(11,9,8,.72);
  --hf-sombra-flotante:0 28px 70px rgba(0,0,0,.28); --hf-sombra-modal:0 40px 90px rgba(0,0,0,.35);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    /* Colores · marfil (claro por sistema): misma tabla que [data-theme="light"] */
    --hf-fondo:#f3ebdd; --hf-panel:#fbf6ec; --hf-panel-2:#e9e0cf; --hf-texto:#1a1008; --hf-tenue:#6a6054;
    --hf-linea-fuerte:#827868; --hf-brasa:#c2470c; --hf-brasa-texto:#a83a05; --hf-sobre-brasa:#fff6ee;
    --hf-verdin:#17806c; --hf-verdin-texto:#11705f; --hf-sobre-verdin:#f3fbf8;
    --hf-alerta:#c62f35; --hf-alerta-texto:#b52a30; --hf-sobre-alerta:#fff6f5; --hf-foco:#a83a05;
    --hf-logo-b:#17806c; --hf-logo-1:#4fd1b5; --hf-logo-2:#17806c; --hf-logo-3:#0e4a3f;
    --hf-linea:rgba(26,16,8,.13); --hf-linea-2:rgba(26,16,8,.3); --hf-velo:rgba(26,16,8,.45);
    --hf-sombra-flotante:0 24px 60px rgba(26,16,8,.16); --hf-sombra-modal:0 40px 90px rgba(26,16,8,.22);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  /* Colores · marfil (claro forzado) */
  --hf-fondo:#f3ebdd; --hf-panel:#fbf6ec; --hf-panel-2:#e9e0cf; --hf-texto:#1a1008; --hf-tenue:#6a6054;
  --hf-linea-fuerte:#827868; --hf-brasa:#c2470c; --hf-brasa-texto:#a83a05; --hf-sobre-brasa:#fff6ee;
  --hf-verdin:#17806c; --hf-verdin-texto:#11705f; --hf-sobre-verdin:#f3fbf8;
  --hf-alerta:#c62f35; --hf-alerta-texto:#b52a30; --hf-sobre-alerta:#fff6f5; --hf-foco:#a83a05;
  --hf-logo-b:#17806c; --hf-logo-1:#4fd1b5; --hf-logo-2:#17806c; --hf-logo-3:#0e4a3f;
  --hf-linea:rgba(26,16,8,.13); --hf-linea-2:rgba(26,16,8,.3); --hf-velo:rgba(26,16,8,.45);
  --hf-sombra-flotante:0 24px 60px rgba(26,16,8,.16); --hf-sombra-modal:0 40px 90px rgba(26,16,8,.22);
  color-scheme:light;
}

:root{
  /* Constantes de marca (no cambian con el tema) */
  --hf-carbon:#0b0908; --hf-marfil:#f3ebdd;
  /* Tipografía: Clash Display (títulos en MAYÚSCULAS y cifras), Switzer (texto), Geist Mono (etiquetas y datos) */
  --hf-f-display:"Clash Display","Switzer",system-ui,sans-serif;
  --hf-f-texto:"Switzer",system-ui,"Segoe UI",sans-serif;
  --hf-f-mono:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --hf-t-label:11px; --hf-t-xs:11px; --hf-t-data:12px; --hf-t-sm:13px; --hf-t-base:15px; --hf-t-h3:16px; --hf-t-md:17px;
  --hf-t-lg:20px; --hf-t-h2:24px; --hf-t-xl:26px;
  --hf-t-titulo:clamp(28px,3.8vw,46px); --hf-t-hero:clamp(54px,6.2vw,88px);
  --hf-ws-display:.15em;   /* Clash junta las palabras: word-spacing en títulos y botones */
  --hf-track-label:.08em;
  /* Espaciado (base 4) */
  --hf-e1:4px; --hf-e2:8px; --hf-e3:12px; --hf-e4:16px; --hf-e5:24px; --hf-e6:32px; --hf-e7:48px; --hf-e8:64px;
  --hf-margen:26px; --hf-margen-movil:16px;
  /* Marco de la app: tope común de cabecera y contenido, centrado en el lienzo (SCRUM-5, 13-nov: 1240 dejaba un tercio vacío) */
  --hf-marco-max:1600px;
  /* Radios: esquinas opuestas 4/28 que se invierten al pasar; filas 4/18; controles en pastilla */
  --hf-r-chico:4px; --hf-r-control:16px; --hf-r-grande:28px; --hf-r-pildora:99px;
  --hf-r-tarjeta:28px 4px 28px 4px; --hf-r-tarjeta-inv:4px 28px 4px 28px;
  --hf-r-fila:4px 18px 4px 18px; --hf-r-fila-inv:18px 4px 18px 4px; --hf-r-boton-tecla:14px 4px 14px 4px;
  /* Movimiento: solo transform y opacity; con prefers-reduced-motion las duraciones valen 0 */
  --hf-facil:cubic-bezier(.2,.8,.2,1); --hf-facil-sale:cubic-bezier(.5,0,.75,0);
  --hf-dur-rapida:150ms; --hf-dur:250ms; --hf-dur-lenta:450ms; --hf-dur-grafica:640ms;
  /* Capas (las del handoff) */
  --hf-z-riel:15; --hf-z-hoja:38; --hf-z-toast:40; --hf-z-cabecera:10;

  /* Alias con los nombres del handoff, para copiar el CSS de referencia-app.html sin traducirlo. No hay alias de espaciado:
     --s1…--s8 ya significan otra cosa en las pantallas viejas (base.css). */
  --bg:var(--hf-fondo); --panel:var(--hf-panel); --panel2:var(--hf-panel-2); --line:var(--hf-linea); --line2:var(--hf-linea-2);
  --fg:var(--hf-texto); --mut:var(--hf-tenue); --wow:var(--hf-brasa); --on-wow:var(--hf-sobre-brasa); --ok:var(--hf-verdin);
  --on-ok:var(--hf-sobre-verdin); --bad:var(--hf-alerta); --on-bad:var(--hf-sobre-alerta);
  --lgb:var(--hf-logo-b); --lg1:var(--hf-logo-1); --lg2:var(--hf-logo-2); --lg3:var(--hf-logo-3);
  --f-d:var(--hf-f-display); --f-b:var(--hf-f-texto); --f-m:var(--hf-f-mono);
  --r1:4px; --r2:28px; --r-card:var(--hf-r-tarjeta); --r-card-hover:var(--hf-r-tarjeta-inv); --r-row:var(--hf-r-fila);
  --ease:var(--hf-facil); --sh-float:var(--hf-sombra-flotante); --sh-modal:var(--hf-sombra-modal);
}
@media (prefers-reduced-motion:reduce){
  :root{--hf-dur-rapida:0ms; --hf-dur:0ms; --hf-dur-lenta:0ms; --hf-dur-grafica:0ms}
}
/* Puntos de quiebre (handoff): móvil ≤ 820 px (dock inferior), tableta 821–1180 px, escritorio ≥ 1181 px (marco máx. --hf-marco-max, centrado). */