/* ============================================
   LUNEXUS — Design tokens
   Fuente: mockups oficiales (Escritorio/Lunexusweb/Mockups).
   No modificar valores sin aprobación — ver docs/ARQUITECTURA.md §0.
   ============================================ */

:root {
  /* Fondos */
  --color-bg:            #0A0F0C;
  --color-bg-elevated:   #111814;
  /* Antes #F7F7F7 (gris neutro). Cambiado a un papel cálido — decisión de
     la revisión de dirección visual 2026-08-11: el sitio pasa de "todo
     oscuro" a oscuro+claro combinado por sección, y un gris de sistema
     hacía que la mitad clara se sintiera fría/genérica frente al verde de
     marca. Aprobado explícitamente por el dueño del proyecto. */
  --color-bg-light:      #F5F1E7;

  /* Marca */
  --color-brand:         #73A63D;
  --color-brand-hover:   #5E8832;
  --color-accent:        #91B967;
  --color-accent-soft:   #B2CE94;

  /* Texto sobre oscuro */
  --color-text:          #F5F7F6;
  --color-text-muted:    #A8B3AD;

  /* Texto sobre claro */
  --color-text-dark:     #0E1512;
  --color-text-dark-mut: #4B5852;
  --color-logo-gray:     #545454;

  --color-border:        #1E2A24;

  /* Utilidad — no viene de ningún mockup: los mockups nunca mostraron un
     formulario real, así que no existía un color de error definido. Rojo
     estándar de accesibilidad (~5:1 sobre --color-bg), usado únicamente
     para validación de formularios (Etapa 8, Contacto). */
  --color-danger: #E5484D;

  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --max-w: 1160px;

  /* Espaciado — ver docs/DESIGN-SYSTEM.md §2.3. Escala de base 4px, nombrada
     por su multiplicador. Todo margin/padding/gap del sitio debe usar uno de
     estos — un valor suelto en px es, por definición, un error de Fase 3. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radios — ver docs/DESIGN-SYSTEM.md §2.4. */
  --radius-sm:   10px; /* inputs, toggle, skip-link */
  --radius-md:   12px; /* botones, icon-box, notif-preview */
  --radius-lg:   16px; /* cards */
  --radius-pill: 20px; /* tags, badges */

  /* Movimiento — ver docs/DESIGN-SYSTEM.md §2.6. Ninguna transición del
     sitio debe usar el "ease" por defecto del navegador ni un número de
     duración suelto: siempre uno de estos tokens. */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Añadido en la revisión de dirección visual 2026-08-11 — pedido explícito
     de movimiento "más fluido" para hovers 3D (tarjetas, botones magnéticos,
     LUX). Un ease con leve rebote ("back"), reservado a esas interacciones
     puntuales — no reemplaza --ease-out en el resto del sitio. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 120ms; /* color, opacidad */
  --duration-base: 200ms; /* transform: elevación, escala */
  --duration-slow: 320ms; /* entradas de scroll-reveal */

  /* Distancia del scroll-reveal (Fase 4) — cuánto se desplaza un bloque
     mientras aparece. Un solo valor para no volver a fragmentar "el mismo
     movimiento" en números sueltos, como pasó con el espaciado en Fase 3. */
  --reveal-distance: 16px;

  /* Profundidad — ver docs/DESIGN-SYSTEM.md §2.5. Fase 2: no se define un
     token "por defecto" para tarjetas informativas porque no se usa
     ninguno — la mayoría del sitio se mantiene plano a propósito. Estos
     dos existen porque tienen un uso concreto e inmediato, no como
     infraestructura para "algún día". */
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.28), 0 16px 32px -12px rgba(0, 0, 0, 0.4); /* elevación en hover — únicas tarjetas interactivas del sitio */
  --shadow-highlight: 0 12px 28px -10px rgba(115, 166, 61, 0.28); /* halo de marca — solo el plan/módulo destacado */
}