/* ============================================================
   JurisOne — SISTEMA A · «EL SUSTRATO» · tokens de color y tipografía
   Única fuente de verdad de las propuestas 1 (oscura) y 2 (clara).

   Las dos propuestas comparten este archivo. Lo que las separa no es una
   paleta distinta: es cuál de los dos CONTEXTOS gobierna la página.
     · index.html  → body.sobre-sustrato   (la página es el material)
     · lamina.html → body.sobre-lamina     (la página es la lámina impresa)
   El contexto claro no es el oscuro invertido: tiene su propio reparto
   tonal, sus propios bordes, sus propias tintas de familia y su propio peso
   tipográfico, porque el fondo claro exige otra cosa.

   Requiere assets/css/comun/estructura.tokens.css cargado antes.
   Ningún otro archivo del sistema declara un color, peso o tamaño literal.
   ============================================================ */

:root {
  /* ══════════════════════════════════════════════════════════
     CAPA 1 · PRIMITIVAS — cambiar aquí cambia las dos propuestas
     ══════════════════════════════════════════════════════════ */

  /* Rampa oscura: el sustrato. Grafito cálido de matiz pardo, no negro neutro. */
  --_sustrato-900: #15120e;
  --_sustrato-800: #1e1a15;
  --_sustrato-700: #302a21;
  --_sustrato-600: #4a4234;  /* borde marcado, decorativo */
  --_sustrato-550: #948a77;  /* borde de control: cumple 3:1 sobre 900 y 800 */
  --_sustrato-500: #6b6151;  /* trazo de diagrama sobre oscuro */

  /* Rampa clara: la lámina. Gris mineral tipo yeso — deliberadamente no crema.
     El reparto es MÁS ABIERTO que el de la rampa oscura: sobre claro, una
     diferencia de dos puntos de gris no se lee, y la jerarquía se pierde. */
  --_lamina-000: #fbfaf6;  /* placa: la lámina ya impresa, casi papel */
  --_lamina-100: #e6e4db;  /* campo: la superficie de la página */
  --_lamina-200: #d5d3c8;  /* hundida: lo que queda por debajo del campo */
  --_lamina-300: #cfccbf;  /* borde sutil */
  --_lamina-400: #b3b0a2;  /* borde marcado, decorativo */
  --_lamina-500: #75736a;  /* borde de control: cumple 3:1 sobre 000, 100 y 200 */
  --_lamina-600: #6f6d61;  /* trazo de diagrama sobre claro */

  /* Tintas */
  --_tinta-900: #16140f;
  --_tinta-500: #4e4a3c;
  --_hueso-100: #edebe4;
  --_hueso-500: #9a9284;

  /* Taxonomía de familias — tintas para fondo oscuro.
     Luminancia pareja y croma bajo: se leen como una familia, no como
     un arcoíris. Todas ≥ 4.5:1 sobre las tres superficies oscuras. */
  --_familia-identidad-sobre-oscuro:    #dcac45;
  --_familia-dinero-sobre-oscuro:       #dc8850;
  --_familia-emision-sobre-oscuro:      #e07d74;
  --_familia-aceptacion-sobre-oscuro:   #a3b665;
  --_familia-inteligencia-sobre-oscuro: #97abc4;

  /* Taxonomía de familias — tintas para fondo claro.
     NO son las anteriores oscurecidas: al bajar de valor, los tonos se
     juntan hacia el negro, así que hubo que reabrir la separación de matiz
     y subir el croma. Todas ≥ 4.5:1 sobre las tres superficies claras. */
  --_familia-identidad-sobre-claro:    #6f500a;
  --_familia-dinero-sobre-claro:       #823f14;
  --_familia-emision-sobre-claro:      #8b2d29;
  --_familia-aceptacion-sobre-claro:   #455825;
  --_familia-inteligencia-sobre-claro: #3e5266;


  /* ══════════════════════════════════════════════════════════
     CAPA 2 · SEMÁNTICAS — lo que consume el resto del CSS
     Por defecto, el mundo oscuro. Los contextos de abajo lo reasignan.
     ══════════════════════════════════════════════════════════ */

  /* ---- Tipografía · familias ---- */
  --fuente-display:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-utilidad: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Tipografía · tamaños por rol (fluidos) ---- */
  --tamano-titular-mayor:  clamp(2.75rem, 1.1rem + 7vw, 7rem);
  --tamano-titular:        clamp(2rem, 1.1rem + 3.6vw, 3.75rem);
  --tamano-subtitulo:      clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  --tamano-placa:          1.0625rem;
  --tamano-lead:           clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  --tamano-cuerpo:         1.0625rem;
  --tamano-cuerpo-menor:   .9375rem;
  --tamano-utilidad:       .75rem;
  --tamano-utilidad-menor: .6875rem;

  /* ---- Tipografía · interlineado y tracking por rol ---- */
  --interlinea-titular:   .92;
  --interlinea-subtitulo: 1.06;
  --interlinea-placa:     1.2;
  --interlinea-lead:      1.5;
  --interlinea-cuerpo:    1.65;
  --interlinea-utilidad:  1.4;
  --tracking-titular:   -.03em;
  --tracking-subtitulo: -.02em;
  --tracking-placa:     -.005em;
  --tracking-utilidad:   .14em;

  /* ---- Color · superficie ---- */
  --color-superficie-base:    var(--_sustrato-900);
  --color-superficie-elevada: var(--_sustrato-800);
  --color-superficie-hundida: var(--_sustrato-700);
  --color-superficie-inversa: var(--_hueso-100);

  /* ---- Color · borde y trazo ----
     «sutil» y «fuerte» son decorativos; «control» es el que delimita un
     elemento interactivo y por eso está obligado a 3:1. */
  --color-borde-sutil:    var(--_sustrato-700);
  --color-borde-fuerte:   var(--_sustrato-600);
  --color-borde-control:  var(--_sustrato-550);
  --color-trazo-diagrama: var(--_sustrato-500);

  /* ---- Color · texto ---- */
  --color-texto-principal:  var(--_hueso-100);
  --color-texto-secundario: var(--_hueso-500);
  --color-texto-inverso:    var(--_sustrato-900);
  --color-foco:             var(--_hueso-100);

  /* ---- Tipografía · peso y ancho variable, por contexto ----
     Sobre oscuro la letra clara «florece» y engorda ópticamente; sobre claro
     pasa lo contrario. Por eso el peso y el ancho de Archivo son token de
     contexto, no una constante del sistema. */
  --peso-display:        600;
  --peso-display-fuerte: 700;
  --peso-cuerpo:         400;
  --peso-cuerpo-fuerte:  600;
  --peso-utilidad:       500;
  --ancho-titular:   118;
  --ancho-subtitulo: 106;
  --ancho-placa:     104;

  /* ---- Color · taxonomía ---- */
  --color-familia-identidad:    var(--_familia-identidad-sobre-oscuro);
  --color-familia-dinero:       var(--_familia-dinero-sobre-oscuro);
  --color-familia-emision:      var(--_familia-emision-sobre-oscuro);
  --color-familia-aceptacion:   var(--_familia-aceptacion-sobre-oscuro);
  --color-familia-inteligencia: var(--_familia-inteligencia-sobre-oscuro);

  /* ---- Color · fotografía ----
     OJO: el velo NO puede declararse una sola vez con var(--color-superficie-base)
     dentro. Un custom property resuelve sus var() anidadas en el elemento donde
     se DECLARA, no donde se usa: declarado aquí, heredaría siempre el fondo de
     :root y pintaría el velo oscuro sobre la página clara. Por eso cada contexto
     declara su propio velo. */
  --foto-mancha:   var(--_sustrato-700);
  --foto-opacidad: .35;
  --foto-velo: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_sustrato-900) 76%, transparent) 0%,
    color-mix(in srgb, var(--_sustrato-900) 90%, transparent) 55%,
    var(--_sustrato-900) 100%
  );

  /* ---- Sombra · las láminas se apilan, no flotan ---- */
  --sombra-placa:    none;
  --sombra-flotante: 0 -8px 32px -12px rgb(0 0 0 / .55);
}


/* ══════════════════════════════════════════════════════════
   CONTEXTO OSCURO · «el sustrato»
   Es el material: lo que está debajo de la marca del cliente.
   ══════════════════════════════════════════════════════════ */
.sobre-sustrato {
  --color-superficie-base:    var(--_sustrato-900);
  --color-superficie-elevada: var(--_sustrato-800);
  --color-superficie-hundida: var(--_sustrato-700);
  --color-superficie-inversa: var(--_hueso-100);

  --color-borde-sutil:    var(--_sustrato-700);
  --color-borde-fuerte:   var(--_sustrato-600);
  --color-borde-control:  var(--_sustrato-550);
  --color-trazo-diagrama: var(--_sustrato-500);

  --color-texto-principal:  var(--_hueso-100);
  --color-texto-secundario: var(--_hueso-500);
  --color-texto-inverso:    var(--_sustrato-900);
  --color-foco:             var(--_hueso-100);

  --peso-display:        600;
  --peso-display-fuerte: 700;
  --ancho-titular:       118;

  --color-familia-identidad:    var(--_familia-identidad-sobre-oscuro);
  --color-familia-dinero:       var(--_familia-dinero-sobre-oscuro);
  --color-familia-emision:      var(--_familia-emision-sobre-oscuro);
  --color-familia-aceptacion:   var(--_familia-aceptacion-sobre-oscuro);
  --color-familia-inteligencia: var(--_familia-inteligencia-sobre-oscuro);

  --foto-mancha:   var(--_sustrato-700);
  --foto-opacidad: .35;
  --foto-velo: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_sustrato-900) 76%, transparent) 0%,
    color-mix(in srgb, var(--_sustrato-900) 90%, transparent) 55%,
    var(--_sustrato-900) 100%
  );

  background-color: var(--color-superficie-base);
  color: var(--color-texto-principal);
}


/* ══════════════════════════════════════════════════════════
   CONTEXTO CLARO · «la lámina»
   La misma dirección rehecha para superficie clara. Tres ajustes que no son
   una inversión de color:
     1. Reparto tonal más abierto — la placa sube a casi papel y el campo
        baja, porque sobre claro la elevación por relleno casi no se ve.
     2. Bordes con más peso relativo — sobre claro la jerarquía la sostiene
        el trazo, no el relleno.
     3. Peso tipográfico +50 y ancho −2 en Archivo — la tinta oscura sobre
        fondo claro adelgaza ópticamente; hay que devolverle cuerpo.
   ══════════════════════════════════════════════════════════ */
.sobre-lamina {
  --color-superficie-base:    var(--_lamina-100);
  --color-superficie-elevada: var(--_lamina-000);
  --color-superficie-hundida: var(--_lamina-200);
  --color-superficie-inversa: var(--_tinta-900);

  --color-borde-sutil:    var(--_lamina-300);
  --color-borde-fuerte:   var(--_lamina-400);
  --color-borde-control:  var(--_lamina-500);
  --color-trazo-diagrama: var(--_lamina-600);

  --color-texto-principal:  var(--_tinta-900);
  --color-texto-secundario: var(--_tinta-500);
  --color-texto-inverso:    var(--_lamina-000);
  --color-foco:             var(--_tinta-900);

  --peso-display:        650;
  --peso-display-fuerte: 720;
  --ancho-titular:       116;

  --color-familia-identidad:    var(--_familia-identidad-sobre-claro);
  --color-familia-dinero:       var(--_familia-dinero-sobre-claro);
  --color-familia-emision:      var(--_familia-emision-sobre-claro);
  --color-familia-aceptacion:   var(--_familia-aceptacion-sobre-claro);
  --color-familia-inteligencia: var(--_familia-inteligencia-sobre-claro);

  --foto-mancha:   var(--_lamina-400);
  --foto-opacidad: .14;   /* sobre claro, la foto de fondo se apaga más: la
                             tinta oscura pierde legibilidad mucho antes */
  --foto-velo: linear-gradient(
    180deg,
    color-mix(in srgb, var(--_lamina-100) 70%, transparent) 0%,
    color-mix(in srgb, var(--_lamina-100) 88%, transparent) 55%,
    var(--_lamina-100) 100%
  );

  background-color: var(--color-superficie-base);
  color: var(--color-texto-principal);
}