/* ============================================================
   Penwork — tokens del sistema de diseño

   FUENTE ÚNICA DE VERDAD DEL COLOR. Los literales `#rrggbb` viven
   SOLO en este fichero: si aparece uno en `base.css`, en
   `componentes.css` o en cualquier hoja de un consumidor, es un
   error y `check.sh` lo señala.

   Identidad propia de Penwork (T31, ADR-1c.1), deliberadamente
   separada del sistema visual de 4d3: se heredan sus prácticas
   —tokens sin literales, `clamp()` siempre, reduced-motion, la voz
   del copy— no su estética.

   Sin modo oscuro (ADR-1c.8): la identidad ya reparte claro y negro
   por superficie (lateral y secciones oscuras), y un tema
   alternativo duplicaría la auditoría AA sin demanda que lo
   justifique.

   Cada ratio de contraste anotado al lado está medido con la
   fórmula de WCAG 2.2 y verificado en `tests/test_estilos.py`.
   La tabla completa, con el uso aprobado de cada par, está en
   `guia.md`.
   ============================================================ */

:root {
  /* --- Marca ------------------------------------------------ */
  --negro:       #131313;
  --blanco:      #FFFFFF;
  --azul:        #2536E8;
  --azul-osc:    #1A26A8;
  --mantequilla: #F2E96B;

  /* Superficie elevada sobre negro: la caja de organización del
     lateral y el hover del menú. Es un valor sólido y no un
     `rgba(255,255,255,.08)` a propósito: un color con alfa no se
     puede medir en una tabla de contrastes, y esta paleta se
     audita entera. */
  --negro-2:     #242424;

  /* --- Neutros ---------------------------------------------- */
  --gris:        #ECECE8;   /* superficie apagada, cabeceras de tabla */
  --gris-2:      #D5D5CE;   /* separadores de 1px, DECORATIVOS (ver abajo) */
  --gris-3:      #F7F7F5;   /* fondo de página de la aplicación */
  --rojo:        #B0342C;   /* 6,22 sobre blanco · error y peligro */

  /* --- Texto ------------------------------------------------ */
  /* Dos niveles a propósito. Abajo, el color crudo; encima, el token
     SEMÁNTICO que usan los componentes. La diferencia importa: una
     superficie oscura redefine `--txt-2` para su subárbol —y con ello
     `.tenue`, las cabeceras de tabla y las etiquetas de ficha cambian
     de color solas— mientras el color crudo sigue disponible para que
     los componentes de superficie clara lo restablezcan. Sin esa
     separación, un `.oscuro .tenue` con color fijo se cuela dentro de
     una ficha blanca y deja gris claro sobre gris claro. */
  --tinta-2:     #5F5F59;        /*  6,43 sobre blanco · 5,99 sobre gris-3 */
  --tinta-3:     #6A6A63;        /*  5,45 sobre blanco · 4,60 sobre gris */
  --plata:       #A5A5A5;        /*  7,54 sobre negro · 6,30 sobre negro-2 */

  /* Sobre superficie clara */
  --txt:         var(--negro);   /* 18,58 sobre blanco */
  --txt-2:       var(--tinta-2);
  /* El nivel más claro que sigue pasando AA: 5,45 sobre blanco.
     Sustituye a los dos grises del mockup que NO pasaban —el
     placeholder #9A9A93 (2,83) y el #C9C9C2 de la celda vacía de la
     matriz (1,66)—, que son justo los «dudosos» que la fase manda
     corregir. Un guion que dice «esta persona no tiene permiso» es
     información: no puede quedarse en decoración. */
  --txt-3:       var(--tinta-3);

  /* Sobre superficie oscura */
  --sobre-negro:   var(--blanco);   /* 18,58 sobre negro */
  --sobre-negro-2: var(--plata);

  /* --- Tintes ----------------------------------------------- */
  /* Fondos muy claros para hover de fila, selección y notas. El
     texto que va encima es siempre --negro (15,87 el peor caso). */
  --tinte-azul:       #F3F4FF;
  --tinte-azul-2:     #EAECFF;   /* fila seleccionada */
  --tinte-mantequilla:#FDFBE6;   /* nota informativa */
  --tinte-rojo:       #FBEFEE;   /* nota seria · rojo encima da 5,54 */

  /* --- Semántica de superficie ------------------------------ */
  --fondo:  var(--gris-3);
  --papel:  var(--blanco);

  /* --- Bordes ----------------------------------------------- */
  /* El borde estructural de la identidad: 2px de negro. Todo lo que
     es un control lleva ESTE borde (18,58), así que no hace falta
     un `--borde-control` aparte como en el sistema anterior. */
  --borde:            var(--negro);
  --borde-ancho:      2px;
  --borde-ancho-fino: 1.5px;   /* controles densos de la aplicación */

  /* Separador interno de 1px. Es DECORATIVO: da 1,47 sobre blanco y
     no llega al 3:1 de WCAG 1.4.11, así que no puede ser lo único
     que identifique un control ni transmitir información. Separa
     filas de tabla y renglones de ficha, nada más. */
  --borde-fino: var(--gris-2);

  /* --- Sombras duras --------------------------------------- */
  /* Desplazadas y sin difuminar: es el gesto de la identidad. */
  --sombra-baja:     3px 3px 0 var(--negro);
  --sombra:          4px 4px 0 var(--negro);
  --sombra-alta:     6px 6px 0 var(--negro);
  --sombra-elevada:  8px 8px 0 var(--negro);
  --sombra-hundida:  1px 1px 0 var(--negro);

  /* --- Foco ------------------------------------------------- */
  /* Azul sobre superficie clara (7,58 sobre blanco). Sobre negro el
     azul se hunde a 2,45, así que ahí el anillo es mantequilla
     (14,73). La matriz combina los dos para ser visible tanto en
     una celda vacía y blanca como en una activa y azul. */
  --foco:         var(--azul);
  --foco-oscuro:  var(--mantequilla);
  --foco-ancho:   3px;
  --foco-margen:  2px;

  /* --- Tipografía ------------------------------------------ */
  /* Gabarito para titulares y para todo lo funcional: etiquetas,
     botones, cifras, cabeceras de tabla. Karla para el contenido.
     Los fallbacks son fuentes de sistema, nunca una descarga. */
  --tipo-titulo: "Gabarito", "Trebuchet MS", "Segoe UI", sans-serif;
  --tipo-texto:  "Karla", Helvetica, Arial, sans-serif;
  --tipo-mono:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Escala fluida. `clamp()` siempre, nunca `font-size` dentro de
     una media query: así el zoom al 200 % no pierde contenido. */
  --texto-hero:     clamp(2.625rem, 6.4vw, 5rem);       /* 42 → 80 px, h1 de landing */
  --texto-titular:  clamp(1.875rem, 4vw, 3.125rem);     /* 30 → 50 px, h2 de sección pública */
  --texto-h1:       clamp(1.75rem, 3.4vw, 2.5rem);      /* 28 → 40 px, h1 de pantalla */
  --texto-h1-app:   clamp(1.25rem, 2.2vw, 1.5rem);      /* 20 → 24 px, cabecera de la app */
  --texto-h3:       clamp(1.125rem, 1.8vw, 1.375rem);   /* 18 → 22 px, cajas */
  --texto-h2:       clamp(1.0625rem, 1.6vw, 1.1875rem); /* 17 → 19 px, tarjetas */
  --texto-guia:     clamp(1.0625rem, 1.3vw, 1.21875rem);/* entradillas */
  --texto-cuerpo:   1rem;
  --texto-menudo:   0.875rem;
  --texto-micro:    0.75rem;     /* eyebrow y etiquetas en mayúsculas */

  --interlinea:        1.55;
  --interlinea-guia:   1.6;
  --interlinea-titulo: 1.08;
  --apiete-titulo:  -0.025em;   /* letter-spacing de los titulares */
  --apiete-marca:   -0.045em;   /* el wordmark aprieta más */
  --separa-etiqueta: 0.1em;     /* letter-spacing de las mayúsculas */

  /* --- Espaciado ------------------------------------------- */
  --esp-0: 0.25rem;
  --esp-1: 0.5rem;
  --esp-2: 0.75rem;
  --esp-3: 1rem;
  --esp-4: 1.375rem;
  --esp-5: 1.75rem;
  --esp-6: 2.5rem;
  --esp-7: 3.5rem;
  --esp-8: 5.25rem;

  /* --- Medidas -------------------------------------------- */
  --ancho-max:    1200px;   /* contenedor de las páginas públicas */
  --ancho-texto:  68ch;     /* medida de lectura de los legales */
  --ancho-lede:   52ch;
  --lateral:      230px;    /* el lateral oscuro de la aplicación */
  --ficha:        336px;    /* columna de la ficha lateral */

  /* Cortes responsive. No se pueden usar dentro de `@media` —CSS no
     resuelve `var()` ahí—, así que están aquí como documentación
     del contrato: si cambian, hay que cambiarlos también en las
     media queries de `base.css` y `componentes.css`.
     --corte-lateral: 940px  · el lateral pasa a barra horizontal
     --corte-ficha:  1100px  · la ficha lateral baja bajo la tabla
     --corte-medio:   860px  · las rejillas de tres pasan a una
     --corte-movil:   640px  · se reduce el relleno de página */

  /* --- Movimiento ----------------------------------------- */
  /* Micro: el desplazamiento del botón al pasar por encima. Todo se
     anula bajo `prefers-reduced-motion` en `base.css`. */
  --micro: 0.1s ease;
  --alza:  translate(-2px, -2px);
  --alza-corta: translate(-1px, -1px);
  --hunde: translate(2px, 2px);
}