/* ==========================================================================
   RodiAutos · Tokens del sistema «Bodega honesta» (E02 PLAN §6.6.1, prototipo DESIGN.md).
   Rojo = acción, precio y lo malo (≤ 10 % de superficie). Asfalto = calle e historia. Concreto = muro de la bodega.
   Contrastes WCAG verificados con tools/contraste.py (texto ≥ 4,5:1, texto grande y bordes de UI ≥ 3:1).
   Cargar primero: rodi-tokens.css → rodi-sitio.css → (rodi-historia.css | rodi-repuestos.css).
   Los --kv-* se remapean al final para que los componentes heredados del núcleo salgan con la marca RodiAutos.
   ========================================================================== */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/michroma-latin-400-normal.woff2") format("woff2")}

:root{
  /* Marca */
  --ra-rojo:#D22630; --ra-rojo-700:#A81E27; --ra-rojo-claro:#FF6B73; --ra-rojo-velo:rgba(210,38,48,.10);
  --ra-asfalto:#17191C; --ra-asfalto-800:#1B1D21; --ra-asfalto-700:#2A2E33; --ra-asfalto-600:#3A3F46;
  --ra-concreto:#EFEDE8; --ra-concreto-300:#DEDBD3; --ra-concreto-200:#E7E4DD; --ra-concreto-100:#F6F5F1; --ra-blanco:#FFFFFF;
  --ra-gris-ficha:#5C6168; --ra-placa:#F2C300;
  /* Estados (siempre con ícono + texto) */
  --exito:#1F7A4D; --alerta:#8A5A00; --error:#B42318; --info:#1D5FA8;
  --exito-velo:#E3F1EA; --alerta-velo:#F6ECD9; --error-velo:#F8E4E2; --info-velo:#E2ECF7;
  /* Semánticos (claro) */
  --bg:var(--ra-concreto); --bg-alt:var(--ra-concreto-100); --superficie:var(--ra-blanco); --superficie-2:var(--ra-concreto-200);
  --texto:var(--ra-asfalto); --texto-2:#575C63; --texto-3:#6B7078; --borde:var(--ra-concreto-300); --borde-fuerte:#C2BEB5;
  --borde-campo:#71767D; --accion:var(--ra-rojo); --accion-hover:var(--ra-rojo-700); --accion-texto:#FFFFFF;
  --enlace:var(--ra-rojo-700); --precio:var(--ra-rojo-700); --marca-dano:var(--ra-rojo);
  --foco:0 0 0 2px var(--ra-blanco), 0 0 0 5px var(--ra-asfalto);
  --banda:var(--ra-asfalto); --banda-2:#202328; --banda-texto:#ECEAE6; --banda-texto-2:#B4B9C0; --banda-borde:#33373D;
  --sombra-1:0 1px 2px rgba(23,25,28,.06),0 2px 10px rgba(23,25,28,.05);
  --sombra-2:0 2px 4px rgba(23,25,28,.06),0 14px 34px rgba(23,25,28,.10);
  --sombra-hoja:0 -8px 40px rgba(23,25,28,.18);
  --sil-cuerpo:#FFFFFF; --sil-trazo:var(--ra-asfalto); --sil-vidrio:#D9DCE0; --sil-piso:#CFCBC2;
  /* Tipografía */
  --f-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --f-texto:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --f-datos:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-extendida:"Michroma","Plus Jakarta Sans","Segoe UI",sans-serif;
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:clamp(1.25rem,1.1rem + .6vw,1.5rem); --t-xl:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  --t-2xl:clamp(2rem,1.5rem + 2vw,3rem); --t-3xl:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);
  --t-hero:clamp(3.4rem,1rem + 10vw,10rem);
  /* Espacio (base 4 px) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;
  /* Forma y movimiento */
  --radio:2px; --chaflan:14px;
  --m-rapido:150ms; --m-base:250ms; --m-lento:400ms; --m-curva:cubic-bezier(.2,.8,.2,1); --m-salida:cubic-bezier(.4,0,1,1);
  --ancho-max:1200px; --canal:16px; --cabecera:64px;
  color-scheme:light;
}
@media (min-width:768px){:root{--canal:32px;--cabecera:72px}}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121416; --bg-alt:#16181B; --superficie:#1B1D21; --superficie-2:#22252A;
  --texto:#ECEAE6; --texto-2:#A9AEB5; --texto-3:#959AA2; --borde:#2A2E33; --borde-fuerte:#3E434A; --borde-campo:#80858D;
  --enlace:var(--ra-rojo-claro); --precio:#FF7A81; --accion-hover:#B8202A; --marca-dano:#D22630;
  --exito:#4CC38A; --alerta:#E2A93B; --error:#F97066; --info:#6AA5F0;
  --exito-velo:#16291F; --alerta-velo:#2D2414; --error-velo:#33191A; --info-velo:#152234; --ra-rojo-velo:rgba(255,107,115,.12);
  --foco:0 0 0 2px #121416, 0 0 0 5px var(--ra-placa);
  --banda:#0E0F11; --banda-2:#17191C; --banda-borde:#26292E;
  --sombra-1:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25); --sombra-2:0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.4);
  --sil-cuerpo:#24272C; --sil-trazo:#D9D6D0; --sil-vidrio:#3A3F46; --sil-piso:#33373D;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121416; --bg-alt:#16181B; --superficie:#1B1D21; --superficie-2:#22252A;
  --texto:#ECEAE6; --texto-2:#A9AEB5; --texto-3:#959AA2; --borde:#2A2E33; --borde-fuerte:#3E434A; --borde-campo:#80858D;
  --enlace:var(--ra-rojo-claro); --precio:#FF7A81; --accion-hover:#B8202A; --marca-dano:#D22630;
  --exito:#4CC38A; --alerta:#E2A93B; --error:#F97066; --info:#6AA5F0;
  --exito-velo:#16291F; --alerta-velo:#2D2414; --error-velo:#33191A; --info-velo:#152234; --ra-rojo-velo:rgba(255,107,115,.12);
  --foco:0 0 0 2px #121416, 0 0 0 5px var(--ra-placa);
  --banda:#0E0F11; --banda-2:#17191C; --banda-borde:#26292E;
  --sombra-1:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25); --sombra-2:0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.4);
  --sil-cuerpo:#24272C; --sil-trazo:#D9D6D0; --sil-vidrio:#3A3F46; --sil-piso:#33373D;
  color-scheme:dark}
@media (prefers-reduced-motion:reduce){:root{--m-rapido:0ms;--m-base:0ms;--m-lento:0ms}}

/* Puente con los componentes del núcleo (alertas, formularios, tablas) */
:root{
  --kv-bosque:var(--ra-asfalto); --kv-bosque-900:#0E0F11; --kv-bosque-700:var(--ra-asfalto-700);
  --kv-hoja:var(--ra-rojo); --kv-hoja-texto:var(--ra-rojo-700); --kv-hoja-claro:var(--ra-rojo-claro);
  --kv-sol:var(--ra-placa); --kv-pizarra:var(--texto); --kv-pizarra-suave:var(--texto-2); --kv-marfil:var(--bg); --kv-blanco:var(--superficie);
  --kv-borde:var(--borde); --kv-borde-fuerte:var(--borde-fuerte); --kv-fondo-suave:var(--bg-alt);
  --kv-fuente-titulos:var(--f-display); --kv-fuente-texto:var(--f-texto); --kv-radio:var(--radio); --kv-radio-s:var(--radio);
}