/* ============================================================================
   TOKENS — Shanghai Summit Industrial
   Familia visual: Técnico Industrial → derivada "industrial-midnight-gold".
   Concepto rector: "etiquetado para la carga" (cada referencia con su medida y su WLL).
   Twist: Nunito redondeada sobre una familia de grotesca condensada; oro SOLO en la etiqueta
          y en la acción; radios de 2 px.
   Elemento distintivo: la etiqueta de carga (.tag) en header, familias, fichas y pie.
   Paleta del cliente (mockup SUMMIT.html): midnight · navy · charcoal · gold · ivory.
   ============================================================================ */
:root{
  /* --- marca --- */
  --brand-1:#0B1220;            /* midnight  · oklch(17.5% .030 264) */
  --brand-2:#172338;            /* navy      · oklch(25.0% .040 263) */
  --brand-3:#11151C;            /* charcoal  · oklch(19.0% .012 266) */
  --brand-4:#C6A15B;            /* gold      · oklch(72.5% .088  82) */
  --brand-5:#D8BE88;            /* gold light· oklch(81.0% .066  84) */
  --accent:var(--brand-4);
  --accent-deep:#86652B;        /* oro oscuro: texto de acento sobre claro (AA) */

  /* --- tinta y superficies --- */
  --ink:#0B1220;
  --ink-soft:#4B5566;
  --ink-mute:#646D7A;
  --surface:#FFFFFF;
  --surface-2:#F5F3EE;          /* ivory */
  --surface-3:#EDEAE2;
  --on-dark:#F5F3EE;
  --on-dark-soft:rgba(245,243,238,.72);
  --on-dark-mute:rgba(245,243,238,.52);
  --line:#D9D5CC;
  --line-soft:#E7E3DA;
  --line-dark:rgba(245,243,238,.16);
  --line-dark-soft:rgba(245,243,238,.09);

  /* --- tipografía --- */
  --font-display:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular','Consolas',monospace;
  --fs-mono:.75rem;
  --tr-mono:.10em;

  /* --- geometría --- */
  --radius:2px;
  --radius-lg:3px;
  --maxw:1280px;
  --pad:clamp(1.1rem,4vw,2.75rem);
  --shadow:0 1px 0 rgba(11,18,32,.06);
  --shadow-lift:0 2px 0 var(--brand-4);
  --rule:1px solid var(--line);

  /* --- escala de espaciado 4/8 --- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;  --s7:3rem;  --s8:4rem;  --s9:6rem;  --s10:8rem;
  --sec:clamp(3.5rem,7vw,6.5rem);        /* padding vertical de sección */
  --sec-tight:clamp(2.5rem,5vw,4.25rem);

  /* --- escala tipográfica (ratio 1.26) --- */
  --t-xs:.78rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.1rem;
  --t-h4:clamp(1.02rem,.96rem + .25vw,1.18rem);
  --t-h3:clamp(1.18rem,1.06rem + .5vw,1.45rem);
  --t-h2:clamp(1.65rem,1.28rem + 1.55vw,2.6rem);
  --t-h1:clamp(2.05rem,1.5rem + 2.3vw,3.35rem);
  --t-display:clamp(2.6rem,1.6rem + 4.2vw,5rem);

  /* --- motion (Ley de Motion, Emil) --- */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --d1:120ms; --d2:180ms; --d3:260ms;

  /* --- chrome --- */
  --hdr-h:64px;
}
@media (min-width:1180px){ :root{ --hdr-h:76px; } }