/* ============================================================
   JurisOne — SISTEMA C · «AUTORIZADO» · tokens
   Única fuente de verdad de la propuesta 4. Ronda 3.

   TESIS. La única palabra que este negocio existe para producir es
   APROBADA. JurisOne es el conmutador que la responde: cada operación
   entra por un puerto, se rutea y sale autorizada. La página no describe
   un producto: enseña el tablero donde eso ocurre.

   EL COLOR. Verde de autorización. En cualquier datáfono, consola o log
   de autorización del mundo, la respuesta afirmativa llega en verde. Es
   el único color que un procesador emisor puede reclamar sin mentir, y
   ninguno de los dos orígenes lo tiene: no es el menta neón de opencard
   (#0AF3AB, matiz 161°, luminosidad 50 %) sino una tinta de bosque de
   matiz 138°, saturación 60 % y luminosidad 23 %. Y no es teal: el matiz
   está sesgado al amarillo, a 42° del azul.

   DOMINANCIA. El verde no es un acento: es superficie. La capa 03 —la
   plataforma, lo único que JurisOne realmente es— se inunda de verde a
   sangre completa, y el cierre entero también. El resto es papel.
   Regla del sistema: VERDE = lo que opera JurisOne.

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

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

  /* El papel del tablero: un gris con cast verde, no crema y no greige.
     Existe para que el verde no sea una isla dentro de un fondo ajeno. */
  --_papel-100: #eff2ed;   /* campo de la página */
  --_papel-200: #e0e5dc;   /* celda hundida: lo que está fuera de la plataforma */

  --_linea-300: #cbd2c6;   /* filete decorativo */
  --_linea-400: #a9b4a3;   /* filete marcado / retícula de la matriz */
  --_linea-500: #6e7a69;   /* borde de control — 4,00:1 sobre el campo */

  /* El verde de autorización */
  --_verde-900: #082d18;   /* la plataforma inundada y el cierre */
  --_verde-700: #175d2c;   /* VERDE DE MARCA — titulares, marcas, CTA */
  --_verde-400: #57a167;   /* retícula de la matriz sobre verde — 4,79:1 */
  --_verde-300: #93c69f;   /* borde de control sobre verde — 7,73:1 */

  --_tinta-900: #101a15;   /* texto sobre papel */
  --_tinta-500: #46524b;   /* texto secundario sobre papel */
  --_claro-100: #e7efe9;   /* texto sobre verde — 12,81:1 */
  --_claro-500: #9db6a8;   /* texto secundario sobre verde — 6,93:1 */


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

  /* ---- Una celda de matriz no tiene esquina redondeada ----
     El sistema A troquela (radio ISO de tarjeta). Aquí la unidad no es la
     tarjeta: es el puerto. Un puerto es ortogonal. */
  --radio-escala: 0;

  /* ---- Tipografía · familias ----
     Ninguna coincide con las de las otras propuestas. */
  --fuente-display:  "Big Shoulders Display", "Arial Narrow", sans-serif;
  --fuente-texto:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --fuente-utilidad: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --fuente-dato:     "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* ---- Tipografía · tamaños ----
     Big Shoulders es una condensada de señalética civil: ocupa ~40 % menos
     ancho por carácter que una grotesca normal, así que la escala de
     display puede subir mucho más de lo que subiría con cualquier otra. */
  --tamano-titular-mayor:  clamp(3.5rem, 1rem + 11vw, 10rem);
  --tamano-titular:        clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
  --tamano-subtitulo:      clamp(1.5rem, 1.1rem + 1.7vw, 2.375rem);
  --tamano-placa:          1.25rem;
  --tamano-lead:           clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --tamano-cuerpo:         1rem;
  --tamano-cuerpo-menor:   .9375rem;
  --tamano-utilidad:       .75rem;
  --tamano-utilidad-menor: .6875rem;

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

  /* ---- Tipografía · interlineado y tracking ---- */
  --interlinea-titular:   .88;   /* la condensada aguanta un plomo muy corto */
  --interlinea-subtitulo: .96;
  --interlinea-placa:     1.05;
  --interlinea-lead:      1.55;
  --interlinea-cuerpo:    1.6;
  --interlinea-utilidad:  1.4;
  --tracking-titular:   -.005em;
  --tracking-subtitulo: -.005em;
  --tracking-placa:      .005em;
  --tracking-utilidad:   .1em;
  --tracking-dato:       .04em;

  /* ---- Color · superficie ---- */
  /* No hay --color-superficie-elevada: en este sistema nada se eleva. Las
     celdas comparten filete, no se apilan. */
  --color-superficie-base:    var(--_papel-100);
  --color-superficie-hundida: var(--_papel-200);
  --color-superficie-inversa: var(--_verde-700);   /* el CTA es verde de marca */

  /* La plataforma: el único campo inundado de la página. */
  --color-plataforma: var(--_verde-900);
  --color-marca:      var(--_verde-700);

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

  /* ---- Color · texto ---- */
  --color-texto-principal:  var(--_tinta-900);
  --color-texto-secundario: var(--_tinta-500);
  --color-texto-inverso:    var(--_claro-100);
  --color-foco:             var(--_verde-700);

  /* ---- Medida propia del tablero ----
     Más ancha que la de las otras propuestas: un tablero se lee a lo ancho. */
  --ancho-maximo:  1320px;
  --ancho-lectura: 660px;
  --ancho-celda:   16rem;    /* umbral de columna de la matriz */
  --ancho-puerto:  11rem;    /* umbral de columna de la matriz de puertos */
  --trazo-marca: 3px;           /* filete que abre una capa */
  --sangria-optica-titular: -.04em;  /* corrección óptica del titular contra el margen */

  /* Sin tokens de sombra: en este sistema no hay ninguna sombra que
     parametrizar. Un tablero es plano. */
}


/* ══════════════════════════════════════════════════════════
   CONTEXTOS
   Dos, y significan una sola cosa: dentro o fuera de la plataforma.
   .sobre-papel      → lo que el cliente pone encima y a los lados
   .sobre-plataforma → lo que opera JurisOne
   ══════════════════════════════════════════════════════════ */
.sobre-papel {
  --color-superficie-base: var(--_papel-100);
  background-color: var(--color-superficie-base);
  color: var(--color-texto-principal);
}

/* El contexto verde gobierna dos cosas: el cierre de la página y la capa 03
   del diagrama. Las dos son «dentro de la plataforma», así que comparten
   declaración: si mañana cambia el verde, cambian juntas. */
.sobre-plataforma,
.capa[data-superficie="elevada"] {
  --color-superficie-base:    var(--_verde-900);
  --color-superficie-hundida: var(--_verde-900);
  --color-superficie-inversa: var(--_claro-100);
  --color-marca:              var(--_claro-100);
  --color-borde-sutil:    color-mix(in srgb, var(--_verde-400) 45%, transparent);
  --color-borde-fuerte:   var(--_verde-400);
  --color-borde-control:  var(--_verde-300);
  --color-texto-principal:  var(--_claro-100);
  --color-texto-secundario: var(--_claro-500);
  --color-texto-inverso:    var(--_verde-900);
  --color-foco:             var(--_claro-100);
  color: var(--color-texto-principal);
}

/* La capa 03 pinta su fondo con un sangrado lateral (ver secciones.css);
   el cierre lo pinta directo. */
.sobre-plataforma { background-color: var(--color-superficie-base); }