/* ============================================================
   LIGHT TRONIC — Design tokens · Concepto «KELVIN»
   Base oscura de penumbra donde la marca actúa como fuente de luz.
   Paleta extraída del logo oficial: #00A8E0 (celeste) · #181818 (tinta).
   Temperatura de color: cálido 3000K (hogar) ⇆ frío 6500K (industria).
   ============================================================ */

:root {
  /* --- Color: superficies --- */
  --void: #05080d;            /* fondo base, azul noche profundo */
  --surface: #0a111b;         /* paneles */
  --surface-2: #101a28;       /* cards, elementos elevados */
  --surface-3: #16233597;     /* vidrio (nav, sticky) */
  --line: rgba(178, 205, 230, 0.11);
  --line-strong: rgba(178, 205, 230, 0.22);

  /* --- Color: marca (del logo) --- */
  --brand: #00a8e0;
  --brand-bright: #2fc4f5;
  --brand-deep: #006e96;
  --ink: #05080d;             /* texto sobre fondos de marca */

  /* --- Color: temperatura (el guiño al rubro) --- */
  --warm: #ffc98a;            /* blanco cálido 3000K */
  --cool: #cfe9ff;            /* blanco frío 6500K */
  --glow-warm: rgba(255, 178, 102, 0.14);
  --glow-cool: rgba(120, 200, 255, 0.12);
  --glow-brand: rgba(0, 168, 224, 0.22);
  /* mezcla ambiental: la controla JS por sección (0 = cálido, 1 = frío) */
  --kelvin: 0.5;
  --ambient: color-mix(in oklab, var(--glow-warm) calc((1 - var(--kelvin)) * 100%), var(--glow-cool));

  /* --- Color: texto --- */
  --text: #e9eff6;
  --text-dim: #92a3b6;
  --text-faint: #5c6d80;

  /* --- Estado / feedback --- */
  --ok: #6fd98f;
  --error: #ff8f7a;

  /* --- Tipografía ---
     Archivo (display semi-expandida): titulares que aguantan glow.
     IBM Plex Sans / Mono: familia técnica, specs y datos. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.06rem, 1rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  --text-3xl: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  --text-hero: clamp(2.5rem, 1.7rem + 4.4vw, 4.9rem);

  /* --- Espaciado / layout --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: clamp(4.5rem, 3rem + 6vw, 8rem);
  --container: 74rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  /* --- Luz: sombras y glow en capas --- */
  --shadow-lift: 0 18px 45px -18px rgba(0, 0, 0, 0.65);
  --glow-ring: 0 0 0 1px var(--line-strong);
  --glow-soft: 0 0 24px -4px var(--glow-brand);
  --glow-full:
    0 0 6px rgba(0, 168, 224, 0.55),
    0 0 28px -2px var(--glow-brand),
    0 0 80px -12px var(--glow-brand);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 700ms;
}