/* ============================================================
   JurisOne — TOKENS DE ESTRUCTURA (compartidos por las tres propuestas)

   Aquí vive todo lo que NO es color ni tipografía: la escala de espacio,
   la medida, el radio, el trazo, el movimiento y el orden de capas.
   Las tres versiones parten de este mismo esqueleto métrico; lo que las
   diferencia es la capa de color/tipo que se carga encima.

   Dos capas, como siempre:
     1. PRIMITIVAS  (--_nombre)  → escalas crudas, privadas de este archivo.
     2. SEMÁNTICAS  (--rol)      → lo único que consume el resto del CSS.
   ============================================================ */

:root {
  /* ══════════════════════════════════════════════════════════
     CAPA 1 · PRIMITIVAS
     ══════════════════════════════════════════════════════════ */

  /* Escala de espacio cruda (base 8) */
  --_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;

  /* Radio ISO/IEC 7810 ID-1: 3,18 mm sobre 85,60 mm de ancho = 3,71 %.
     Todo radio del sistema «sustrato» es una esquina de tarjeta real a la
     escala del elemento. La propuesta «registro» pone --radio-escala en 0,
     porque un registro se pauta, no se troquela. */
  --_radio-160: 6px;   /* placa de ~160 px */
  --_radio-320: 12px;  /* placa de ~320 px */
  --_radio-540: 20px;  /* panel de ~540 px */
  --_radio-760: 28px;  /* sección de ~760 px */


  /* ══════════════════════════════════════════════════════════
     CAPA 2 · SEMÁNTICAS
     ══════════════════════════════════════════════════════════ */

  /* ---- Espacio por rol ---- */
  --espacio-minimo:         var(--_e-1);   /* etiqueta ↔ su valor */
  --espacio-corto:          var(--_e-2);   /* entre chips, entre líneas de lista */
  --espacio-texto:          var(--_e-3);   /* entre párrafos hermanos */
  --espacio-elemento:       var(--_e-4);   /* entre elementos de un mismo grupo */
  --espacio-grupo:          var(--_e-5);   /* entre grupos; padding interno de placa */
  --espacio-bloque:         var(--_e-6);   /* entre bloques de una sección */
  --espacio-bloque-mayor:   var(--_e-7);
  --espacio-capitulo:       var(--_e-8);   /* entre capítulos de una sección */
  --espacio-capitulo-mayor: var(--_e-9);
  --espacio-seccion:        clamp(72px, 9vw, 160px);  /* padding vertical de sección */
  --espacio-borde-pantalla: clamp(20px, 5vw, 56px);   /* margen lateral del sitio */

  /* ---- Medida ---- */
  --ancho-maximo:   1240px;
  --ancho-lectura:  680px;
  --proporcion-tarjeta: 1.5858;  /* ISO/IEC 7810 ID-1: 85,60 / 53,98 */
  --toque-minimo:   44px;
  --ancho-indice-capa:        200px;  /* columna de código y pregunta en el descenso */
  --ancho-minimo-placa:       15rem;  /* umbral de columna en la rejilla de módulos */
  --ancho-minimo-placa-ancha: 16rem;  /* umbral en las capas hundidas (rieles) */

  /* ---- Radio · un solo mando global ---- */
  --radio-escala: 1;
  --radio-chip:    calc(var(--_radio-160) * var(--radio-escala));
  --radio-tarjeta: calc(var(--_radio-320) * var(--radio-escala));
  --radio-panel:   calc(var(--_radio-540) * var(--radio-escala));
  --radio-seccion: calc(var(--_radio-760) * var(--radio-escala));

  /* ---- Trazo ---- */
  --trazo-hairline:  1px;
  --trazo-foco:      2px;
  --separacion-foco: 3px;

  /* ---- Canto laminado ----
     La costura entre secciones. El canto de una tarjeta cortada deja ver
     el apilado de láminas: tres hairlines a paso regular. */
  --altura-canto: var(--_e-5);
  --paso-canto:   var(--_e-2);

  /* ---- Movimiento ---- */
  --curva-salida:   cubic-bezier(.23, 1, .32, 1);
  --curva-descenso: cubic-bezier(.77, 0, .175, 1);
  --duracion-presion:        140ms;
  --duracion-hover:          180ms;
  --duracion-filtro:         220ms;
  --duracion-detalle-abre:   260ms;
  --duracion-detalle-cierra: 180ms;
  --duracion-revelado:       520ms;
  --duracion-espina:         900ms;
  --retraso-escalonado:       60ms;

  /* Magnitudes del movimiento (nada de números sueltos en las transiciones) */
  --desplazamiento-revelado:  10px;   /* de dónde entra un bloque al revelarse */
  --elevacion-hover:          -2px;   /* cuánto sube una placa pulsable */
  --escala-presion:           .985;   /* botones y chips en :active */
  --escala-presion-placa:     .99;    /* placas pulsables en :active */
  --atenuacion-filtrado:      .3;     /* opacidad de lo no seleccionado por el filtro */
  --saturacion-filtrado:      .15;

  /* ---- Capas ---- */
  --capa-foto:      0;
  --capa-contenido: 2;
  --capa-firma:     3;
  --capa-nav:      10;
}