/* ============================================================
   DIEMSAC — tokens.css (v3, ámbar/negro real — 10-sep-2026)
   Franco: "en iluminación y eléctrico el ámbar sobre oscuro ES el código
   del rubro — la luz del producto brilla". El azul era el color genérico
   de cualquier plantilla corporativa. Se invierte la jerarquía:
     ÁMBAR  = marca (botones, precios, palabra destacada, badges, hover)
     NEGRO/GRAFITO = estructural (nav, footer, hero, un bloque a sangre)
     BLANCO HUMO = zonas de catálogo/lectura
     AZUL   = eliminado como color de marca; solo queda como --info
              funcional y discreto (links de texto, estado "info"),
              NUNCA en botón primario ni ícono de categoría.
   La v2 (light técnico ámbar-de-adorno) no falló por la estructura de
   card/venta — eso ya está resuelto y se mantiene igual — falló solo en
   la jerarquía de color. Ver lecciones.md.
   ============================================================ */
:root {
  --primary:        #F5A623;          /* ámbar — botones primarios, precios, acento de marca */
  --primary-ink:    #14100A;          /* texto oscuro sobre ámbar (nunca blanco sobre ámbar) */
  --accent:         #FDBA43;          /* ámbar claro — variante para chips/hover */
  --accent-2:       #C97A0F;          /* ámbar oscuro — variante para chips/badges secundarios */

  --ink:            #14100A;          /* negro real — nav, footer, hero, bloques a sangre */
  --graphite:       #1F242B;          /* grafito — variante estructural (chips, secciones alternas oscuras) */

  --bg:             #F7F7F5;          /* blanco humo — catálogo, zonas de lectura */
  --bg-2:           #EFEFEA;          /* secciones alternas claras */
  --surface:        #FFFFFF;
  --surface-2:      #F1F1EC;
  --border:         rgba(10,14,20,.10);
  --border-strong:  rgba(10,14,20,.22);

  --text:           #1A1D21;
  --text-2:         #4B525C;
  --text-3:         #6B7280;          /* ≥ 4.5:1 sobre --bg y --bg-2 (AA) */

  --info:           #2563EB;          /* funcional y discreto: links de texto, estado "info" — NUNCA botón/ícono de marca */
  --success: #15803D; --warning: #B45309; --danger: #B91C1C;

  --grad-brand:  linear-gradient(135deg, var(--primary) 0%, var(--accent-2) 100%);
  --grad-cool:   linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  --grad-text:   linear-gradient(90deg, var(--text) 0%, #374151 45%, var(--primary) 100%);
  --glow:        0 0 0 1px rgba(245,166,35,.18), 0 0 40px -8px rgba(245,166,35,.35);
  --glow-cool:   0 0 40px -12px rgba(245,166,35,.35);

  --font-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fs-hero:  clamp(2.2rem, 5vw, 3.8rem);   /* hero compacto, no full-screen (inmersión baja) */
  --fs-h1:    clamp(2rem, 4vw, 3.2rem);
  --fs-h2:    clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:    clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-lead:  clamp(1rem, 1.3vw, 1.15rem);
  --fs-body:  1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .78rem;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.6;
  --track-tight: -0.02em; --track-wide: .12em;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-24: 6rem;  --section: clamp(3rem, 7vw, 5.5rem); /* secciones más compactas: densidad alta */
  --container: 1200px; --container-wide: 1400px; --gutter: clamp(1rem, 4vw, 2.5rem);

  --radius-s: 8px; --radius: 12px; --radius-l: 18px; --radius-xl: 26px; --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --shadow-2: 0 10px 24px -10px rgba(16,24,40,.14);
  --shadow-3: 0 24px 60px -20px rgba(16,24,40,.2);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .15s; --dur: .25s; --dur-slow: .5s; /* motion más corto: no debe retrasar ver el precio */
}