/* ============================================================
   JurisOne — SISTEMA D · «UNA SOLA» · tokens
   Única fuente de verdad de la propuesta 5. Ronda 3.

   TESIS. El producto se llama Juris·ONE y toda su promesa es una resta:
   seis proveedores y seis contratos se vuelven una integración; doce
   módulos, una plataforma; cinco capas, una operación. La página hace esa
   resta con sus propios medios: una sola columna, una sola letra de peso,
   un solo color.

   EL COLOR. Ámbar. La regla del sistema es que el color de marca
   NUNCA ES VOZ, SIEMPRE ES SUPERFICIE: JurisOne es lo que sostiene la
   página, no lo que habla en ella —igual que sostiene el producto del
   cliente sin ponerle su nombre encima—. Eso exige un color que sea
   ilegible como tinta y dominante como campo, y el ámbar de alto croma
   es exactamente eso: falla como texto sobre papel (1,9:1) y aguanta
   8,7:1 de tinta cuando es fondo. El color no se eligió porque combine;
   se eligió porque obedece la tesis. Y es, además, el estado de un
   sistema que está encendido y cargando: la luz del rack, del datáfono,
   de la señal de vía. Infraestructura visible solo para poder operarla.
   No es de ningún banco, y no es de ninguno de los dos orígenes.

   Requiere assets/css/comun/estructura.tokens.css cargado antes.
   ============================================================ */

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

  /* El papel: casi blanco y de croma casi nulo. No es crema, no es greige
     y no es papel de registro. Existe para que el ámbar sea lo único que
     tenga color en toda la página. */
  --_papel-100: #f4f4f2;   /* campo de la página */
  --_papel-200: #e8e8e4;   /* recuadro y campo hundido */

  --_linea-300: #dbdbd6;   /* filete decorativo */
  --_linea-400: #bfbfb9;   /* filete marcado */
  --_linea-500: #75756e;   /* borde de control — 4,21:1 sobre el campo */

  /* El ámbar. UN solo valor. No hay rampa: los estados de hover y presión
     se derivan con color-mix contra la tinta, así que cambiar esta línea
     cambia la marca entera y nada más. */
  --_ambar-500: #f2a324;   /* ÁMBAR DE MARCA — solo superficie */

  --_tinta-900: #17150f;   /* tinta — 16,6:1 sobre papel, 8,7:1 sobre ámbar */
  --_tinta-600: #3a372f;   /* tinta secundaria SOBRE ÁMBAR — 5,68:1 */
  --_tinta-500: #4e4a41;   /* tinta secundaria sobre papel — 8,01:1 */


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

  /* ---- Dos radios y nada en medio ----
     «Una sola» aplicado a la forma: una superficie es una loseta (recta),
     un control es una cápsula (redondo completo). No hay valores
     intermedios, porque un valor intermedio sería una tercera decisión. */
  --_radio-capsula: 999px;
  --radio-escala: 0;                        /* toda superficie, recta */
  --radio-chip: var(--_radio-capsula);      /* la única excepción: los controles */

  /* ---- Tipografía · dos familias ----
     Ninguna coincide con las de las otras propuestas. */
  --fuente-display:  "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fuente-utilidad: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fuente-dato:     "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  /* ---- Tipografía · tamaños ----
     Escala corta y decidida: tres tamaños grandes y tres pequeños. Nada
     en medio, por la misma razón que no hay radios intermedios. */
  --tamano-titular-mayor:  clamp(2.75rem, 1.2rem + 5.6vw, 5.25rem);
  --tamano-titular:        clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  --tamano-subtitulo:      clamp(1.625rem, 1.15rem + 1.9vw, 2.5rem);
  --tamano-placa:          clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
  --tamano-lead:           clamp(1.125rem, 1.03rem + .55vw, 1.4375rem);
  --tamano-cuerpo:         1.0625rem;
  --tamano-cuerpo-menor:   1rem;
  --tamano-utilidad:       .75rem;
  --tamano-utilidad-menor: .6875rem;

  /* ---- Tipografía · pesos ---- */
  --peso-display:        700;
  --peso-display-fuerte: 800;
  --peso-cuerpo:         400;
  --peso-cuerpo-fuerte:  600;
  --peso-utilidad:       600;

  /* ---- Tipografía · interlineado y tracking ----
     Bricolage tiene trampas de tinta y aperturas cerradas: a cuerpo grande
     admite un plomo muy corto sin que las líneas se toquen. */
  --interlinea-titular:   .94;
  --interlinea-subtitulo: 1.02;
  --interlinea-placa:     1.15;
  --interlinea-lead:      1.5;
  --interlinea-cuerpo:    1.62;
  --interlinea-utilidad:  1.4;
  --tracking-titular:   -.035em;
  --tracking-subtitulo: -.025em;
  --tracking-placa:     -.015em;
  --tracking-utilidad:   .1em;
  --tracking-dato:       .02em;

  /* ---- Color · superficie ---- */
  /* No hay --color-superficie-elevada: nada se eleva en esta página. */
  --color-superficie-base:    var(--_papel-100);
  --color-superficie-hundida: var(--_papel-200);
  --color-superficie-inversa: var(--_ambar-500);   /* el CTA es el ámbar */

  --color-marca: var(--_ambar-500);

  /* ---- Color · trazo ---- */
  --color-borde-sutil:    var(--_linea-300);
  --color-borde-fuerte:   var(--_linea-400);
  --color-borde-control:  var(--_linea-500);

  /* ---- Color · texto ----
     El ámbar no aparece en esta tabla, y no es un olvido: es la regla.
     El color de marca no habla. */
  --color-texto-principal:  var(--_tinta-900);
  --color-texto-secundario: var(--_tinta-500);
  --color-texto-inverso:    var(--_tinta-900);   /* tinta sobre el campo ámbar */
  --color-foco:             var(--_tinta-900);

  /* ---- Medida ----
     UNA SOLA MEDIDA, y muy angosta. 900 px de contenedor para toda la
     página: la portada, el diagrama y el cierre usan exactamente el mismo
     ancho, de modo que en una pantalla de 1440 la página se lee como una
     columna deliberada y no como un contenedor a medio llenar. Es la
     tesis aplicada a la retícula, y es lo contrario exacto del tablero
     ancho y denso de la propuesta «Autorizado» (1320 px). */
  --ancho-maximo:  900px;
  --ancho-lectura: 640px;
  --espacio-seccion: clamp(96px, 12vw, 200px);
  --ancho-minimo-riel: 13rem;   /* umbral de columna: los tres rieles caben a lo ancho */
  --marcas-maximo: 12;          /* la capa más poblada: la barra de conteo se mide contra ella */
  --altura-conteo: 10px;        /* grosor de la barra de conteo */

  /* Sin tokens de sombra: no hay ninguna sombra que parametrizar. */
}


/* ══════════════════════════════════════════════════════════
   CONTEXTOS
   Dos superficies y nada más: papel y ámbar. No hay contexto oscuro,
   no hay tercera superficie, no hay segundo color.
   ══════════════════════════════════════════════════════════ */
.sobre-papel {
  --color-superficie-base: var(--_papel-100);
  background-color: var(--color-superficie-base);
  color: var(--color-texto-principal);
}

.sobre-ambar {
  --color-superficie-base:    var(--_ambar-500);
  --color-superficie-hundida: var(--_papel-100);
  --color-superficie-inversa: var(--_tinta-900);   /* sobre ámbar, el CTA es tinta */
  --color-marca:              var(--_tinta-900);
  --color-borde-sutil:    color-mix(in srgb, var(--_tinta-900) 22%, transparent);
  --color-borde-fuerte:   color-mix(in srgb, var(--_tinta-900) 40%, transparent);
  --color-borde-control:  var(--_tinta-500);
  --color-texto-principal:  var(--_tinta-900);
  --color-texto-secundario: var(--_tinta-600);
  --color-texto-inverso:    var(--_papel-100);
  --color-foco:             var(--_tinta-900);
  background-color: var(--color-superficie-base);
  color: var(--color-texto-principal);
}