/* ==========================================================================
   RodiAutos · Tokens del sistema de diseño «Bodega honesta». Documentación: docs/SISTEMA_DE_DISENO.md
   Cargar SIEMPRE primero: tokens.css → base.css → app.css | panel.css | portal.css
   Los NOMBRES de las variables (--kv-bosque, --kv-hoja…) se conservan del núcleo RODIAUTOS para que las correcciones
   de upstream entren limpias; los VALORES son de RodiAutos:
     --kv-bosque = asfalto #17191C · --kv-hoja = rojo #D22630 (acción, ≤ 10 %) · --kv-hoja-texto = rojo 700 #A81E27 ·
     --kv-sol = placa #F2C300 (≤ 2 %) · --kv-fondo-suave = concreto #EFEDE8 · --kv-pizarra-suave = gris ficha #5C6168.
   Contrastes AA: asfalto/blanco 17,5:1 · blanco sobre rojo 5,6:1 (botón acento) · rojo 700/blanco 7,3:1 ·
   gris ficha/concreto 5,2:1 · asfalto sobre placa 11:1 (la placa nunca como texto sobre claro).
   ========================================================================== */

/* ---------- Tipografías autoalojadas (subconjunto latino, woff2; licencia OFL) ---------- */
@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: 600 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"); }

:root {
  /* Marca */
  --kv-bosque: #17191C;        /* asfalto: títulos, botones primarios, cabeceras */
  --kv-bosque-900: #0E0F11;    /* fondos muy oscuros (pie, barra lateral) */
  --kv-bosque-700: #2A2D32;    /* hover de primario */
  --kv-hoja: #D22630;          /* rojo RodiAutos: acción (fondo con texto blanco), ≤ 10 % de superficie */
  --kv-hoja-texto: #A81E27;    /* rojo 700 para texto y enlaces sobre fondos claros (AA) */
  --kv-hoja-claro: #FF6B73;    /* rojo claro: texto rojo sobre fondos oscuros */
  --kv-hoja-100: #F6D5D7;
  --kv-hoja-50: #FBECEC;
  --kv-sol: #F2C300;           /* placa: ≤ 2 % (visto del sello «Revisado», foco sobre oscuro) */
  --kv-sol-50: #FDF6D6;
  --kv-pizarra: #33373C;       /* texto de cuerpo */
  --kv-pizarra-suave: #5C6168; /* texto secundario (AA también sobre el fondo gris #EFEDE8 del portal y del panel) */
  --kv-marfil: #FAF9F6;        /* fondo general */
  --kv-blanco: #FFFFFF;

  /* Neutros y estados */
  --kv-borde: #DEDBD4;
  --kv-borde-fuerte: #C6C2B9;
  --kv-fondo-suave: #EFEDE8;
  --kv-exito: #1F7A4D;   --kv-exito-fondo: #E3F2EA;
  --kv-alerta: #8A5A00;  --kv-alerta-fondo: #FEF3CD;
  --kv-peligro: #B42318; --kv-peligro-fondo: #FDECEA;
  --kv-info: #1D5FA8;    --kv-info-fondo: #E7F0FB;

  /* Paleta categórica de gráficas, validada (banda de luminosidad, croma, separación CVD ≥ 8 entre vecinos).
     Orden fijo: nunca se recicla. Gris = serie de referencia. Replicada en kv-graficas.js. */
  --kv-grafica-1: #D22630;
  --kv-grafica-2: #3572C6;
  --kv-grafica-3: #D08E00;
  --kv-grafica-4: #B2508F;
  --kv-grafica-referencia: #8A8F96;
  --kv-grafica-rejilla: #DEDBD4;
  --kv-grafica-texto: #33373C;

  /* Tipografía */
  --kv-fuente-titulos: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --kv-fuente-texto: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --kv-fuente-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --kv-t-xs: .8125rem;   /* 13 */
  --kv-t-s: .875rem;     /* 14 */
  --kv-t-m: 1rem;        /* 16 */
  --kv-t-l: 1.125rem;    /* 18 */
  --kv-t-xl: 1.375rem;   /* 22 */
  --kv-t-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --kv-t-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.625rem);
  --kv-t-4xl: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);

  /* Espaciado (escala de 4 px) */
  --kv-e-1: .25rem; --kv-e-2: .5rem; --kv-e-3: .75rem; --kv-e-4: 1rem; --kv-e-5: 1.5rem;
  --kv-e-6: 2rem; --kv-e-7: 3rem; --kv-e-8: 4rem; --kv-e-9: 6rem;

  /* Forma */
  --kv-radio: 4px;
  --kv-radio-s: 2px;
  --kv-chaflan: 14px;   /* esquina cortada a 45° en tarjetas de vehículos y repuestos */
  --kv-radio-pill: 999px;
  --kv-sombra-1: 0 1px 2px rgba(23, 25, 28, .06), 0 1px 3px rgba(23, 25, 28, .08);
  --kv-sombra-2: 0 4px 12px rgba(23, 25, 28, .08), 0 2px 4px rgba(23, 25, 28, .05);
  --kv-sombra-3: 0 16px 40px rgba(23, 25, 28, .14);
  --kv-foco: 0 0 0 2px var(--kv-marfil), 0 0 0 5px var(--kv-bosque);   /* F6-B C4: anillo doble ≥3:1 sobre claro (12,7:1) */
  --kv-foco-oscuro: 0 0 0 2px var(--kv-bosque), 0 0 0 5px var(--kv-sol); /* sobre fondos oscuros (sol/bosque 7:1) */

  /* Rejilla */
  --kv-ancho-max: 1200px;
  --kv-canal: 16px;          /* margen lateral en móvil */
  --kv-columnas: 12;

  --kv-transicion: 160ms ease;
}

@media (min-width: 768px) {
  :root { --kv-canal: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --kv-transicion: 0ms; }
}