/* Valores de diseño de la calculadora (specs/001-bandas/plan.md §8 D20; specs/_componentes/README.md §Sistema de diseño).
   Origen: los 144 valores del sistema de diseño de la maqueta de Claude Design del 2026-09-22, en
   design/mockup/2026_09_22_maqueta/extraido/_ds/calculadora-salarial-sistema-de-dise-o-f985f69a-2f0a-420f-b5d3-664a5a85fdfa/tokens/
   (tipografia.css, color.css, estados.css, forma.css y marcas.css, en ese orden), con el mismo nombre y el mismo valor.
   fuentes.css no se copia: la letra se sirve con la página (D19, vendor/fuentes/fuentes.css).
   Tres EXCEPCIONES con nombre (regla 12, contraste; P-191 punto 15), marcadas «EXCEPCIÓN» abajo:
     --texto-nulo                 oklch(0.74 0.01 255) → oklch(0.53 0.01 255): 5,28:1 sobre blanco, 4,78:1 sobre --superficie-suave.
     --excluida-opacidad          0.62 → 1: la fila excluida se atenúa con --marca-excluida-texto y el tachado, no con opacidad.
     --persona-inactiva-opacidad  0.55 → 1: la persona inactiva se atenúa con --texto-tenue y su etiqueta, no con opacidad.
   Tres AGREGADOS del frontend, al final: los colores que la maqueta escribía sueltos (CONC-DS-07).
   Un cambio de valor pasa primero por la spec. Ningún color se escribe fuera de este archivo (frontend/pruebas/tokens.test.mjs). */
:root {
  /* ---- tipografia.css ---- */
  --fuente-interfaz: 'Libre Franklin', system-ui, sans-serif;
  --fuente-marca: 'Source Serif 4', Georgia, serif;
  --texto-xs: 10.5px;
  --texto-s: 11.5px;
  --texto-m: 12.5px;
  --texto-l: 13.5px;
  --texto-xl: 17px;
  --texto-cifra: 27px;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-titulo: 700;
  --cifras: tabular-nums;
  --interlineado: 1.4;

  /* ---- color.css ---- */
  /* Neutros · familia azul grisácea */
  --fondo-app: oklch(0.976 0.006 248);
  --superficie: oklch(1 0 0);
  --superficie-suave: oklch(0.966 0.007 248);
  --superficie-hover: oklch(0.958 0.007 248);
  --borde: oklch(0.895 0.013 250);
  --borde-fuerte: oklch(0.865 0.013 250);
  --borde-campo: oklch(0.78 0.01 255);
  --texto: oklch(0.24 0.042 258);
  --texto-secundario: oklch(0.46 0.028 252);
  --texto-tenue: oklch(0.53 0.024 252);
  --texto-nulo: oklch(0.53 0.01 255); /* EXCEPCIÓN: en la maqueta, oklch(0.74 0.01 255) (2,30:1) */
  /* Marca y acción */
  --primario: oklch(0.27 0.075 260);
  --primario-hover: oklch(0.21 0.055 260);
  --sobre-primario: oklch(0.99 0.002 250);
  --enlace: oklch(0.36 0.095 258);
  --sobre-primario-tenue: oklch(0.80 0.024 255);
  --sobre-primario-borde: oklch(0.47 0.055 258);
  --barra-suave-fondo: oklch(0.93 0.012 250);
  --barra-suave-texto: oklch(0.30 0.045 258);
  --barra-suave-borde: oklch(0.84 0.018 250);
  --tooltip-fondo: oklch(0.20 0.045 260);
  --tooltip-texto: oklch(0.98 0.002 250);
  --foco: oklch(0.55 0.13 258);
  --deshabilitado-texto: oklch(0.62 0.015 252);
  --deshabilitado-fondo: oklch(0.95 0.005 250);
  /* Retroalimentación · ámbar = AVISO, rojo = ERROR */
  --aviso-fondo: oklch(0.974 0.020 82);
  --aviso-borde: oklch(0.855 0.042 80);
  --aviso-texto: oklch(0.34 0.048 70);
  --error-fondo: oklch(0.972 0.016 30);
  --error-borde: oklch(0.825 0.050 30);
  --error-acento: oklch(0.40 0.095 30);
  --error-texto: oklch(0.35 0.085 30);
  /* Vista simulada: franja permanente, separada de aviso y error */
  --simulada-fondo: oklch(0.27 0.075 260);
  --simulada-texto: oklch(0.99 0.002 250);
  --simulada-borde: oklch(0.62 0.09 258);
  /* Las siete zonas · los dos outliers comparten alerta; Mercado es el estado deseable */
  --zona-outlier-texto: oklch(0.41 0.100 32);
  --zona-outlier-fondo: oklch(0.936 0.032 32);
  --zona-ingreso-texto: oklch(0.38 0.070 252);
  --zona-ingreso-fondo: oklch(0.938 0.028 252);
  --zona-crecimiento-texto: oklch(0.40 0.048 218);
  --zona-crecimiento-fondo: oklch(0.944 0.022 218);
  --zona-mercado-texto: oklch(0.36 0.080 302);
  --zona-mercado-fondo: oklch(0.934 0.030 302);
  --zona-madurez-texto: oklch(0.42 0.055 92);
  --zona-madurez-fondo: oklch(0.948 0.034 92);
  --zona-promocion-texto: oklch(0.42 0.072 62);
  --zona-promocion-fondo: oklch(0.945 0.034 62);
  /* Gráfico de bandas · Crecimiento y Madurez comparten --banda-clara; Mercado se distingue (regla 2) */
  --banda-clara: oklch(0.930 0.007 248);
  --banda-mercado: oklch(0.872 0.014 248);
  --bigote: oklch(0.46 0.028 252);
  --bigote-grosor: 1.5px;
  --rombo-empleado: oklch(0.36 0.095 258);
  --rombo-convencionado: oklch(0.53 0.080 68);
  --rombo-opacidad: 0.52;
  --mercado-marcador: oklch(0.39 0.085 302);
  /* Acentos de tarjeta de métrica */
  --acento-positivo: oklch(0.39 0.085 302);
  --acento-advertencia: oklch(0.50 0.075 68);
  --acento-neutro: oklch(0.855 0.014 250);
  --acento-grosor: 3px;

  /* ---- estados.css ---- */
  /* Cinco estados del caso + Borrador: tonos que las zonas no usan; Pendiente invertido (el único que pide una acción);
     Rechazado magenta, no rojo. Toda etiqueta de estado lleva borde de 1 px: la forma la separa del chip de zona. */
  --estado-pendiente-texto: oklch(0.99 0.002 250);
  --estado-pendiente-fondo: oklch(0.27 0.075 260);
  --estado-pendiente-borde: oklch(0.27 0.075 260);
  --estado-aprobado-texto: oklch(0.33 0.085 150);
  --estado-aprobado-fondo: oklch(0.94 0.045 150);
  --estado-aprobado-borde: oklch(0.80 0.09 150);
  --estado-aprobado-cambios-texto: oklch(0.33 0.070 190);
  --estado-aprobado-cambios-fondo: oklch(0.94 0.040 190);
  --estado-aprobado-cambios-borde: oklch(0.78 0.08 190);
  --estado-rechazado-texto: oklch(0.36 0.110 345);
  --estado-rechazado-fondo: oklch(0.94 0.035 345);
  --estado-rechazado-borde: oklch(0.80 0.09 345);
  --estado-retirado-texto: oklch(0.42 0 0);
  --estado-retirado-fondo: oklch(0.93 0 0);
  --estado-retirado-borde: oklch(0.78 0 0);
  --estado-borrador-texto: oklch(0.46 0.028 252);
  --estado-borrador-fondo: oklch(1 0 0);
  --estado-borrador-borde: oklch(0.70 0.02 252);
  /* Estados de una versión de datos (C77) y de una persona (C68): reusan tonos con nombre propio */
  --estado-publicada-texto: oklch(0.33 0.085 150);
  --estado-publicada-fondo: oklch(0.94 0.045 150);
  --estado-publicada-borde: oklch(0.80 0.09 150);
  --estado-fallida-texto: oklch(0.35 0.085 30);
  --estado-fallida-fondo: oklch(0.972 0.016 30);
  --estado-fallida-borde: oklch(0.825 0.050 30);
  --estado-en-proceso-texto: oklch(0.46 0.028 252);
  --estado-en-proceso-fondo: oklch(1 0 0);
  --estado-en-proceso-borde: oklch(0.70 0.02 252);
  --estado-activa-texto: oklch(0.36 0.06 258);
  --estado-activa-fondo: oklch(1 0 0);
  --estado-activa-borde: oklch(0.82 0.03 255);
  --estado-inactiva-texto: oklch(0.42 0 0);
  --estado-inactiva-fondo: oklch(0.93 0 0);
  --estado-inactiva-borde: oklch(0.78 0 0);
  --estado-pendiente-ingreso-texto: oklch(0.46 0.028 252);
  --estado-pendiente-ingreso-fondo: oklch(1 0 0);
  --estado-pendiente-ingreso-borde: oklch(0.70 0.02 252);

  /* ---- forma.css ---- */
  --radio-tarjeta: 12px;
  --radio-control: 8px;
  --radio-chip: 5px;
  --sombra-base: 0 1px 2px oklch(0.22 0.045 260 / 0.04);
  --sombra-flotante: 0 10px 26px oklch(0.22 0.045 260 / 0.14);
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --celda-tabla: 5px 6px;
  --control: 7px 9px;
  --barra-alto: 44px;
  --ancho-referencia: 1440px;
  --ancho-minimo: 1280px;
  --riel-ancho: 264px;
  --riel-plegado: 36px;
  --foco-anillo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--foco);

  /* ---- marcas.css ---- */
  /* Marcas de línea de un caso, «lo enviado al lado», cambios «de → a», barra de decisión, personas inactivas y etapas
     de una carga: familia azul grisácea, ni avisos (ámbar) ni zonas. */
  --marca-texto: oklch(0.36 0.06 258);
  --marca-fondo: oklch(0.95 0.012 250);
  --marca-borde: oklch(0.82 0.03 255);
  --marca-excluida-texto: oklch(0.53 0.024 252);
  --excluida-opacidad: 1; /* EXCEPCIÓN: en la maqueta, 0.62 (2,5:1 efectivo) */
  --excluida-decoracion: line-through;
  --enviado-al-lado: oklch(0.53 0.024 252);
  --cambio-flecha: oklch(0.62 0.02 252);
  --cambio-resaltado-fondo: oklch(0.966 0.007 248);
  --persona-inactiva-opacidad: 1; /* EXCEPCIÓN: en la maqueta, 0.55 (3,77:1 efectivo) */
  --barra-decision-alto: 48px;
  --etapa-activa-fondo: oklch(0.27 0.075 260);
  --etapa-activa-texto: oklch(0.99 0.002 250);
  --etapa-hecha-texto: oklch(0.33 0.085 150);
  --etapa-pendiente-texto: oklch(0.53 0.024 252);
  --casilla-archivo-borde: oklch(0.78 0.01 255);
  --casilla-archivo-fondo: oklch(0.976 0.006 248);

  /* ---- AGREGADOS del frontend (CONC-DS-07): los tres colores que la maqueta escribía sueltos ---- */
  --sobre-primario-linea: oklch(1 0 0 / 0.28); /* borde de las acciones sobre la barra oscura (ds:632) */
  --velo-dialogo: oklch(0.24 0.042 258 / 0.35); /* velo detrás de un diálogo (ds:1351) */
  --sombra-cambio: drop-shadow(0 0 3px oklch(0.347 0.073 256.7 / 0.55)); /* ejes que cambian en el radar (ds:4824, rgba(31, 58, 95, .55) en OKLCH) */
}