/* ============================================================
   LynxWeb — Design Tokens
   ------------------------------------------------------------
   Fuente única de verdad de la identidad visual. Consolida los
   colores, tipografía, espaciado y curvas que ya se usaban de
   forma dispersa en custom.css/theme.css.

   Cargar ANTES de custom.css (ver head.php) para que las
   variables estén disponibles en toda la cascada.

   Decisión: ADR-011 / fase U4 del ROADMAP.
   Uso incremental: a partir de mayo 2026, todo componente nuevo
   o rediseñado debe usar estas variables en lugar de hex sueltos.
   ============================================================ */

:root {
  /* ----- Color · Marca ----- */
  --lx-brand:          #c8102e;  /* rojo Lynx principal (el más usado) */
  --lx-brand-strong:   #d00418;  /* rojo intenso para hover/acento */
  --lx-brand-deep:     #a00d24;  /* rojo oscuro para estados pressed */

  /* ----- Color · Acento cyberpunk ----- */
  --lx-accent:         #00e6f6;  /* cian neón (toque tech) */
  --lx-accent-warm:    #f8f005;  /* amarillo neón, uso muy puntual */

  /* ----- Color · Neutros ----- */
  --lx-ink:            #1a1a1a;  /* texto/fondos oscuros */
  --lx-ink-soft:       #2b2b2b;
  --lx-ink-blue:       #001925;  /* azul casi negro: hover de botones (estética del sitio) */
  --lx-muted:          #6c757d;  /* texto secundario */
  --lx-line:           #dee2e6;  /* bordes/separadores */
  --lx-bg:             #ffffff;
  --lx-bg-soft:        #f8f9fa;  /* fondos de sección alternos */

  /* ----- Color · Funcionales ----- */
  --lx-whatsapp:       #25d366;  /* verde oficial WhatsApp */
  --lx-whatsapp-dark:  #1da851;
  --lx-success:        #1da851;
  --lx-danger:         #dc3545;

  /* ----- Tipografía ----- */
  --lx-font-display: 'Orbitron', 'Fira Sans', sans-serif;   /* marca / hero */
  --lx-font-heading: 'Roboto Slab', Georgia, serif;          /* títulos */
  --lx-font-ui:      'DM Sans', sans-serif;                  /* botones, nav (fuente UI del tema) */
  --lx-font-body:    'Fira Sans', 'Open Sans', system-ui, sans-serif; /* cuerpo */

  --lx-fs-xs:   0.8125rem;  /* 13px */
  --lx-fs-sm:   0.9375rem;  /* 15px */
  --lx-fs-base: 1rem;       /* 16px */
  --lx-fs-md:   1.125rem;   /* 18px */
  --lx-fs-lg:   1.5rem;     /* 24px */
  --lx-fs-xl:   2rem;       /* 32px */
  --lx-fs-2xl:  2.75rem;    /* 44px */

  --lx-lh-tight: 1.15;
  --lx-lh-base:  1.6;

  /* ----- Espaciado (escala 8pt) ----- */
  --lx-space-1:  0.25rem;   /* 4 */
  --lx-space-2:  0.5rem;    /* 8 */
  --lx-space-3:  0.75rem;   /* 12 */
  --lx-space-4:  1rem;      /* 16 */
  --lx-space-5:  1.5rem;    /* 24 */
  --lx-space-6:  2rem;      /* 32 */
  --lx-space-7:  3rem;      /* 48 */
  --lx-space-8:  4rem;      /* 64 */

  /* ----- Radios ----- */
  --lx-radius-sm:  6px;
  --lx-radius-md:  12px;
  --lx-radius-lg:  20px;
  --lx-radius-pill: 999px;

  /* ----- Sombras ----- */
  --lx-shadow-sm:  0 1px 3px rgba(0,0,0,.12);
  --lx-shadow-md:  0 6px 18px rgba(0,0,0,.15);
  --lx-shadow-lg:  0 14px 40px rgba(0,0,0,.22);
  --lx-shadow-brand: 0 8px 24px rgba(200,16,46,.35);

  /* ----- Easing (coherencia de movimiento en todo el sitio) ----- */
  --lx-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out, premium */
  --lx-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --lx-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1); /* pequeño rebote */
  --lx-dur-fast:   150ms;
  --lx-dur-base:   250ms;
  --lx-dur-slow:   400ms;

  /* ----- Z-index (escala ordenada) ----- */
  --lx-z-base:      1;
  --lx-z-sticky:    100;
  --lx-z-float:     900;   /* botones flotantes (WhatsApp) */
  --lx-z-overlay:   1000;
  --lx-z-modal:     1100;
}