/* ============================================================
   LUMMA CONNECT — Design Tokens
   Paleta oficial: Morado principal + Teal acento + Navy sidebar
   Colores extraídos del logo y plataforma Lumma Recruiting
   ============================================================ */

:root {

  /* ---- COLOR PRIMARIO — MORADO (predominante) ---- */
  --color-brand-purple:        #5D1F7D;   /* Morado principal del logo/tagline */
  --color-brand-purple-dark:   #3D1252;   /* Morado oscuro para hover/active */
  --color-brand-purple-mid:    #7B35A0;   /* Morado medio */
  --color-brand-purple-light:  #9B59BB;   /* Morado claro para textos sobre oscuro */
  --color-brand-purple-pale:   #F3E8FA;   /* Fondo suave lila */
  --color-brand-purple-border: #D4A8E8;   /* Borde lila */

  /* ---- COLOR HIGHLIGHT 2 — TEAL BRILLANTE (imagen de marca) ---- */
  --color-brand-teal:          #059a9c;   /* Teal intermedio — entre #026c6e y #04b8bb */
  --color-brand-teal-light:    #07b5b8;   /* Teal hover/activo */
  --color-brand-teal-pale:     #e0f5f5;   /* Fondo teal suave */
  --color-brand-teal-mid:      #8dd8d9;   /* Borde teal suave */
  --color-brand-teal-dark:     #037375;   /* Teal oscuro para sombras y gradientes */

  /* ---- NAVY (sidebar de plataforma — usado en hero/footer) ---- */
  --color-brand-navy:          #191E35;   /* Navy profundo */
  --color-brand-navy-mid:      #242B4A;   /* Navy medio */

  /* ---- AI PURPLE ACCENT ---- */
  --color-brand-ai:            #8C52FF;   /* Morado AI/tech de la plataforma */

  /* ---- Neutros ---- */
  --color-black:             #0A0A0A;
  --color-gray-900:          #111827;
  --color-gray-800:          #1F2937;
  --color-gray-700:          #374151;
  --color-gray-600:          #4B5563;
  --color-gray-500:          #6B7280;
  --color-gray-400:          #9CA3AF;
  --color-gray-300:          #D1D5DB;
  --color-gray-200:          #E5E7EB;
  --color-gray-100:          #F3F4F6;
  --color-gray-50:           #F9FAFB;
  --color-white:             #FFFFFF;

  /* ---- Fondos ---- */
  --bg-primary:              var(--color-white);
  --bg-secondary:            var(--color-gray-50);
  --bg-accent:               var(--color-brand-purple-pale);
  --bg-dark:                 var(--color-brand-navy);

  /* ---- Texto ---- */
  --text-primary:            var(--color-gray-900);
  --text-secondary:          var(--color-gray-600);
  --text-muted:              var(--color-gray-400);
  --text-on-dark:            var(--color-white);
  --text-on-dark-muted:      rgba(255,255,255,0.72);
  --text-accent:             var(--color-brand-purple);

  /* ---- Bordes ---- */
  --border-color:            var(--color-gray-200);
  --border-accent:           var(--color-brand-purple-border);

  /* ---- Tipografías ---- */
  --font-heading:            'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:               'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Tamaños de fuente (escala modular 1.25) ---- */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  /* ---- Pesos ---- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ---- Interlineado ---- */
  --leading-tight:    1.2;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;
  --leading-loose:    2;

  /* ---- Espaciado ---- */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-14:   3.5rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* ---- Radios ---- */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ---- Sombras ---- */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.12);
  --shadow-brand: 0 8px 32px rgba(93,31,125,0.22);
  --shadow-teal:  0 8px 32px rgba(4,184,187,0.30);

  /* ---- Transiciones ---- */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Contenedor ---- */
  --container-max:      1280px;
  --container-padding:  clamp(1rem, 4vw, 2rem);

  /* ---- Z-index ---- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-normal: 0ms;
    --transition-slow:   0ms;
    --transition-spring: 0ms;
  }
}