/* ==========================================================================
   IMACOMP B2B 2.0 — Design tokens
   Evolución disciplinada del brand capturado en vivo (spec §3).
   Regla dura del acento: rojo SOLO en CTA primario, dato clave y estado activo.
   ========================================================================== */

:root {
  /* --- Fondos --- */
  --bg-base:        #0F0F0F;   /* dark principal */
  --bg-elevated:    #1A1A1A;   /* tarjetas sobre dark */
  --bg-light:       #F5F5F5;   /* secciones claras (contenido técnico denso) */
  --bg-light-card:  #FFFFFF;

  /* --- Texto --- */
  --text-on-dark:        #F5F5F5;
  --text-on-dark-muted:  #B8B8B8;
  --text-on-light:       #0B0B0B;
  --text-on-light-muted: #525252;

  /* --- Acento (uso restringido) --- */
  --accent:       #C8102E;
  --accent-hover: #E01535;
  --accent-tint:  rgba(200, 16, 46, 0.08);
  --accent-glow:  rgba(200, 16, 46, 0.25);

  /* --- Acero / grafito (tono técnico de apoyo, da profundidad sin competir con el rojo) --- */
  --steel:        #1E2A33;   /* azul-grafito profundo */
  --steel-2:      #26343E;
  --steel-line:   #33454F;
  --steel-tint:   rgba(90, 140, 170, 0.10);
  --steel-text:   #8CA6B5;   /* etiquetas técnicas */

  /* --- Bordes y estados --- */
  --border-dark:  #2A2A2A;
  --border-light: #E0E0E0;
  --success:      #1D9E75;
  --error:        #E24B4A;

  /* --- Tipografía --- */
  --font-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  --font-head:    'Barlow Condensed', 'Barlow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(44px, 7vw, 88px);
  --fs-h2: clamp(32px, 5vw, 56px);
  --fs-h3: clamp(22px, 3vw, 28px);
  --fs-body-lg: 19px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.05;
  --lh-body:  1.65;

  /* --- Radios (lenguaje duro industrial) --- */
  --r-control: 4px;
  --r-card:    8px;
  --r-badge:   2px;

  /* --- Espaciado (unidad 8px) --- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-section: clamp(72px, 10vw, 128px);
  --container: 1200px;
  --container-wide: 1360px;

  /* --- Movimiento --- */
  --t-fast:   0.2s ease;
  --t-reveal: 0.4s ease;

  /* --- Sombras --- */
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-dark: 0 8px 30px rgba(0,0,0,.4);
}