/* TALJ · "Desde la silla" · tokens (Fase T). Un solo cromatico de accion (--fox). Cero cards.
   Todo color de texto/superficie es hex de 6 digitos (lo lee tools/contrast.mjs). */

:root {
  /* ---- Color: superficies (canvas con tinte, nunca #FFF) ---- */
  --canvas: #F4F6F8;
  --surface: #FAFBFC;
  --surface-2: #E9EEF3;
  --surface-3: #DCE3EA;

  /* ---- Color: tinta ---- */
  --ink: #0A1B2E;
  --ink-2: #3B4B5F;
  --ink-3: #566679;

  /* ---- Color: accion (unico cromatico). --fox es el naranja del zorro, fijo. ---- */
  --fox: #C1500B;
  --fox-press: #A64509;
  --on-accent: #FFFFFF;
  --link: #A8420A;

  /* ---- Color: lineas ---- */
  --hairline: #DDE3EA;
  --hairline-strong: #C5CED8;
  --input-border: #7A8798;

  /* ---- Color: navy del logo (hero, nav, footer, franjas de texto bajo la foto) ---- */
  --navy-900: #021A34;
  --navy-800: #0F2F4E;
  --navy-line: #1B3C5F;
  --on-dark: #FFFFFF;
  --on-dark-2: #C5D2E0;
  --link-on-dark: #FFA163;

  /* ---- Estados (solo en estados) ---- */
  --error: #A3280F;
  --ok: #1C6B3C;

  /* ---- Scrims (navy #021A34 = 2 26 52). Alfa derivado de la medicion (qa/scrim-measure.cjs -> qa/scrim-measure.json), no un minimo fijo ----
     --scrim-hero-alpha: 0.55 = tope del plan (§2). Medido sobre 39 cuadros del loop final (1 cada 0,4 s) en 390x844 y 1440x900, con
       object-fit real: p95 de luma bajo cada caja de texto, peor caso. Subtitulo 4,74:1 en 390 y 6,79:1 en 1440 (objetivo 4,5), titular
       6,0:1 y 9,2:1 (objetivo 3), eyebrow 9,4:1, nav 8,1:1 o mejor. Titular y subtitulo quedan en el cielo; forma: elipse con meseta anclada
       al texto, 0 en el borde. Si el video cambia de plano, se vuelve a medir con qa/scrim-measure.cjs.
     --scrim-nav-alpha: 0.40 (tope): degradado de 120 px sobre la nav, 0 al final.
     Las fotos de los paneles NO llevan scrim: el texto va en una franja navy solida pegada bajo la foto. */
  --scrim-rgb: 2 26 52;
  --scrim-hero-alpha: 0.55;
  --scrim-nav-alpha: 0.40;

  /* ---- Tipografia: 2 familias, 3 pesos (300 / 400 / 500). Jost = titulares y cifras (geometrica clara, cero sin barra); Atkinson = texto ---- */
  --font-display: 'Jost', 'Avenir Next', 'Century Gothic', sans-serif;
  --font-body: 'Jost Digits', 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
  --fs-display-1: 40px;
  --fs-display-2: 32px;
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;
  --lh-display: 1.08;
  --lh-h3: 1.2;
  --lh-body: 1.6;
  --track-display: -0.02em;   /* = -(tamano x 0,02): 72 px -> -1,44 px; 40 px -> -0,8 px */
  --track-eyebrow: 0.1em;     /* >= 0,06 em */

  /* ---- Espacio (base 8) ---- */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --gutter: 24px;
  --section-y: 80px;
  --pad: 24px;
  --wrap: 1280px;
  --nav-h: 52px;

  /* ---- Forma: un solo radio ---- */
  --radius: 8px;

  /* ---- Movimiento: dos velocidades. UI 150 ms; el panorama tiene momentum fisico (pano.js) ---- */
  --t-ui: 150ms;
  --t-photo: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Signature: panorama "view from the lift" ---- */
  --lift-h: 640px;
  /* horizonte medido sobre assets/video/pano-150.webp (2400x800): mediana por columna de la primera fila que deja de ser cielo
     = 0,57 del alto (p25 0,48 · p75 0,63; 600 columnas). El borde inferior de la barra de reserva apoya ahi (sin linea dibujada). */
  --horizon: 0.57;
}

@media (min-width: 768px) {
  :root {
    --fs-display-1: 72px;
    --fs-display-2: 48px;
    --fs-h3: 28px;
    --fs-body: 17px;
    --gutter: 40px;
    --section-y: 112px;
    --pad: 32px;
    --lift-h: clamp(480px, min(46vw, 72svh), 700px);
  }
}