/* ============================================================
   Loventy — Design Tokens v5.0
   Obsidian / Aurora / Human social network system
   ============================================================ */

:root {

  /* --- Fondos principales --- */
  --color-bg:            #050812;
  --color-bg-secondary:  #0a1020;

  /* --- Fondos oscuros (cards, hero) --- */
  --color-bg-dark:       #050812;
  --color-bg-dark-2:     #0b1326;
  --color-bg-elevated:   rgba(255,255,255,0.055);
  --color-bg-card:       rgba(255,255,255,0.07);
  --color-bg-card-hover: rgba(255,255,255,0.105);
  --color-surface:       rgba(255,255,255,0.075);
  --color-glass-white:   rgba(255,255,255,0.085);

  /* --- Azul UE (conservado) --- */
  --color-eu-blue:       #003399;
  --color-eu-blue-light: #1a4db5;
  --color-eu-gold:       #FFCC00;

  /* --- Acentos --- */
  --color-accent:        #20d9ff;
  --color-accent-light:  #7ee9ff;
  --color-accent-dark:   #00a9d6;
  --color-accent-2:      #8b5cf6;
  --color-aurora:        #8b5cf6;
  --color-aurora-light:  #c4b5fd;

  /* --- Acento calido — CTAs y Chany --- */
  --color-accent-warm:   #ff7a66;
  --color-accent-warm-2: #ffb086;

  /* --- Acento secundario --- */
  --color-secondary:       #8b5cf6;
  --color-secondary-light: #c4b5fd;
  --color-terracotta:      #c45c2a;
  --color-terracotta-dark: #a64820;
  --color-sage:            #17c6a3;
  --color-sage-dark:       #17c6a3;

  /* --- Cyan alias (compatibilidad interna) --- */
  --color-purple:       var(--color-aurora);
  --color-purple-light: var(--color-aurora-light);
  --color-purple-glow:  rgba(139,92,246,0.24);

  /* --- Textos --- */
  --color-text:             #f7f4ee;
  --color-text-secondary:   #c2c8d6;
  --color-text-muted:       #8f9aae;
  --color-text-light:       #f7f4ee;
  --color-text-light-muted: #aeb8c9;

  /* --- Bordes --- */
  --color-border:      rgba(255,255,255,0.11);
  --color-border-dark: rgba(255,255,255,0.14);

  /* --- Blanco perla y utilidades --- */
  --color-pearl:   #f7f4ee;
  --color-white:   #ffffff;
  --color-error:   #c0392b;
  --color-success: #17c6a3;

  /* --- Reflejos y glows --- */
  --color-glow-orange: rgba(255,122,102,0.22);
  --color-glow-purple: rgba(139,92,246,0.20);
  --color-glow-cyan:   rgba(32,217,255,0.18);
  --color-glow-pearl:  rgba(247,244,238,0.10);

  /* --- Glow / gradiente decorativo --- */
  --glow-border: linear-gradient(135deg, #20d9ff, #8b5cf6, #ff7a66, #17c6a3);
  --glow-shadow: 0 18px 60px rgba(0,0,0,0.40), 0 0 38px rgba(32,217,255,0.12), 0 0 54px rgba(139,92,246,0.10);
  --aurora-border: linear-gradient(120deg, rgba(32,217,255,0.82), rgba(139,92,246,0.72), rgba(255,122,102,0.64), rgba(23,198,163,0.58), rgba(32,217,255,0.82));
  --aurora-surface:
    radial-gradient(circle at 8% 0%, rgba(32,217,255,0.18), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(139,92,246,0.18), transparent 32%),
    radial-gradient(circle at 48% 100%, rgba(255,122,102,0.11), transparent 36%);
  --aurora-ring: 0 0 0 1px rgba(126,233,255,0.18), 0 0 34px rgba(32,217,255,0.15), 0 0 52px rgba(139,92,246,0.12);
  --surface-premium: linear-gradient(145deg, rgba(255,255,255,0.096), rgba(255,255,255,0.044));

  /* --- Hero gradient --- */
  --hero-gradient:
    radial-gradient(circle at 18% 12%, rgba(139,92,246,0.30), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(32,217,255,0.20), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(255,122,102,0.16), transparent 34%),
    linear-gradient(145deg, #050812 0%, #0b1326 54%, #07131d 100%);

  /* --- Tipografia --- */
  --font-heading:   Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.75rem;

  /* --- 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-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* --- Bordes / radius --- */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-full: 9999px;
  --border:      1px solid var(--color-border);

  /* --- Sombras --- */
  --shadow-sm: 0 10px 28px rgba(0,0,0,0.24);
  --shadow-md: var(--glow-shadow);
  --shadow-lg: 0 26px 80px rgba(0,0,0,0.52), var(--glow-shadow);
  --blur-glass: blur(22px) saturate(145%);

  /* --- Transiciones / layout --- */
  --transition:      0.18s ease;
  --transition-slow: 0.35s ease;
  --max-width:       1200px;
  --header-height:   64px;

}