/* Hallmark · tokens · Pallet antiderrames 2 tambores
 * Dirección D2 «El Corte» — Documentacion/direccion-visual.md
 * Todos los pares de color verificados AA. Cero hex sueltos fuera de este archivo.
 */

:root {
  /* ---- Color -------------------------------------------------------------
   * Neutros teñidos en frío sobre hue 248 (el azul de la línea de cota).
   * Contrastes medidos contra su fondo de uso, al final de cada línea.
   */
  --color-grafito:        oklch(20.8% 0.005 248);   /* fondo dominante        */
  --color-grafito-hondo:  oklch(16.7% 0.008 248);   /* interior del corte     */
  --color-grafito-alto:   oklch(25.0% 0.007 248);   /* superficie elevada     */
  --color-papel:          oklch(93.7% 0.010 88);    /* campo claro, plano     */
  --color-papel-alto:     oklch(97.0% 0.007 89);    /* papel elevado          */
  --color-tinta:          oklch(19.9% 0.005 248);   /* 15.1:1 sobre papel     */
  --color-texto:          oklch(92.5% 0.007 89);    /* 14.3:1 sobre grafito   */
  --color-texto-apoyo:    oklch(71.0% 0.013 232);   /*  6.9:1 sobre grafito   */
  --color-tinta-apoyo:    oklch(44.0% 0.008 248);   /*  6.5:1 sobre papel     */
  --color-amarillo:       oklch(84.0% 0.172 90);    /* 10.8:1 sobre grafito   */
  --color-amarillo-hondo: oklch(76.8% 0.157 91);    /* estado presionado      */
  --color-cota:           oklch(63.4% 0.054 240);   /*  5.2:1 sobre grafito   */
  --color-cota-hondo:     oklch(49.3% 0.057 245);   /*  5.1:1 sobre papel     */
  --color-oxido:          oklch(68.4% 0.131 48);    /*  6.0:1 sobre grafito   */
  --color-oxido-hondo:    oklch(49.9% 0.125 40);    /*  5.3:1 sobre papel     */

  /* Filetes. Nunca sombras: la separación es una línea, no una nube. */
  --rule-claro:  color-mix(in oklab, var(--color-texto) 16%, transparent);
  --rule-oscuro: color-mix(in oklab, var(--color-tinta) 18%, transparent);
  --rule-cota:   color-mix(in oklab, var(--color-cota) 55%, transparent);

  /* ---- Tipografía — dos familias, un reparto -----------------------------
   * LO MEDIBLE habla en condensada: cifras, cotas, normas, rótulos, órdenes.
   *   Es la voz del letrero de planta y del plano.
   * LO QUE SE ARGUMENTA habla en serif: frases, promesas, respuestas, avisos.
   *   Es la voz del contrato y de la ficha firmada.
   * Se funden dentro de la misma línea: cuando una frase en serif contiene un
   * dato, el dato cambia de voz (ver `b` en styles.css). Una tercera familia
   * monoespaciada ya no hace falta: la condensada, tracked y en versalitas,
   * hace el trabajo de rótulo técnico sin sumar peso ni ruido.
   */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Ratio 1.333, con un salto grande entre la cifra y todo lo demás. */
  --text-micro:   0.8125rem;  /* rótulo condensado: 13 px, no 12 — la condensada estrecha el ojo */
  --text-sm:      0.875rem;
  --text-body:    1.125rem;   /* la serif tiene menos ojo medio: 18 px leen como 17 de palo seco */
  --text-md:      1.1875rem;
  --text-lg:      1.375rem;
  --text-xl:      clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem);
  --text-h2:      clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  --text-display: clamp(2.6rem, 1.5rem + 5.4vw, 6rem);
  /* El hero ya no abre con una cifra: abre con el producto y la promesa. */
  --text-producto: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
  --text-promesa:  clamp(2.6rem, 1.4rem + 4.8vw, 5.6rem);

  --tracking-display: -0.035em;
  --tracking-h2:      -0.02em;
  --tracking-micro:    0.075em;

  /* ---- Espaciado — una sola escala: 4·8·12·16·24·32·48·64·96·128·192 ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 12rem;

  /* ---- Carriles — cuatro anchos, alternados a lo largo del scroll -------- */
  --rail-text: 66ch;
  --rail-mid:  1080px;
  --rail-wide: 1400px;
  --gutter:    clamp(1rem, 4vw, 4rem);

  /* ---- Forma -------------------------------------------------------------
   * Radio 0 en toda la página: es chapa plegada y dibujo técnico.
   */
  --radius: 0px;
  --rule-width: 1px;
  --rule-gruesa: 3px;

  /* ---- Movimiento — tres momentos, ni uno más --------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-corte: 1300ms;   /* el llenado del corte: es el argumento de la página */

  /* ---- Parallax ----------------------------------------------------------
   * El desplazamiento es proporcional a la ventana, no un valor fijo: así el
   * mismo efecto es discreto en un teléfono de 360 px y amplio en un monitor,
   * sin necesidad de una sola media query. Tres profundidades, no más.
   */
  --deriva-sutil:  clamp(6px,  1.6vw, 22px);   /* planos cercanos al contenido */
  --deriva-media:  clamp(10px, 3vw,   44px);   /* fondos y columnas laterales  */
  --deriva-amplia: clamp(14px, 4.5vw, 72px);   /* deriva horizontal de la franja */
  --alza-entrada:  clamp(14px, 3vw,   34px);   /* recorrido de los reveals     */
  /* La foto dentro de su marco se mide en % de su propio alto: así la holgura
     del zoom siempre cubre el recorrido, mida lo que mida el marco. */
  --zoom-ventana:   1.14;                      /* sobra un 7 % por cada lado   */
  --deriva-ventana: 5%;                        /* recorrido, menor que el 7 %  */

  /* ---- Actos y cascadas --------------------------------------------------
   * Segundo piso del motor: en vez de mover un elemento mientras cruza, un
   * ACTO detiene la página y gasta scroll en contar una sola cosa. La página
   * tiene uno, y es el corte. Tres actos serían ninguno.
   */
  /* Sin curva de reposo: el llenado es un mecanismo enganchado al dedo, y
     cualquier suavizado encima lo deja por detrás del scroll. El respiro del
     acto no se fabrica con una curva, se fabrica con la meseta del final —el
     tramo en que la cuba ya está llena y sólo queda mirarla. */
  --tramo-acto: 2.6;        /* alturas de ventana que ocupa el acto fijado   */

  /* La cascada reparte una misma entrada entre varios hermanos: cada uno
     arranca --n · paso más tarde y todos tardan lo mismo en llegar. */
  --casc-paso:  0.045;      /* desfase por hermano, en fracción de recorrido */
  --casc-dur:   0.22;       /* lo que dura la entrada de cada uno            */

  /* Retirada del hero: cuánto se aleja la cámara al abandonarlo. */
  --retirada-escala: 0.045;
  --retirada-velo:   0.4;

  /* ---- Capas ------------------------------------------------------------ */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-overlay: 30;
  --z-modal:   40;
  --z-toast:   50;
}