/*
 * ============================================================
 * PARTY HOUSE — DESIGN SYSTEM TOKENS v2.0
 * "Social Neon" — for those who know.
 *
 * REGLA: Toda la identidad visual depende de este archivo.
 * Para cambiar la marca: editar aquí, no en componentes.
 * ============================================================
 */

:root {
  /* ── Paleta Principal ─────────────────────────────────────── */
  --ph-bg:         #050505;    /* 70% — fondo dominante */
  --ph-bg-soft:    #0A0A14;    /* cards, panels */
  --ph-bg-lift:    #0D0D1A;    /* hover state de cards */
  --ph-blue:       #1D4FFF;    /* Electric Blue — acción principal */
  --ph-blue-dim:   #1640CC;    /* Blue presionado */
  --ph-purple:     #5D2D91;    /* Deep Purple — acento, gradientes */
  --ph-purple-dim: #4A2474;    /* Purple secundario */
  --ph-magenta:    #FF2E9A;    /* Neon Magenta — highlight, urgencia */
  --ph-magenta-dim:#CC2580;    /* Magenta presionado */
  --ph-white:      #FFFFFF;
  --ph-text:       #F0EEF8;    /* texto principal */
  --ph-text-mute:  #8B8A99;    /* texto secundario */
  --ph-text-dim:   #4A4860;    /* texto desactivado */
  --ph-border:     rgba(255,255,255,0.07);
  --ph-border-blue:rgba(29,79,255,0.4);

  /* ── Glow System (blur suave — nunca gaming) ─────────────── */
  --glow-blue:    0 0 28px rgba(29,79,255,0.30),   0 0 8px rgba(29,79,255,0.15);
  --glow-purple:  0 0 28px rgba(93,45,145,0.30),   0 0 8px rgba(93,45,145,0.15);
  --glow-magenta: 0 0 28px rgba(255,46,154,0.30),  0 0 8px rgba(255,46,154,0.15);
  --glow-subtle:  0 0 16px rgba(29,79,255,0.12);

  /* ── Gradientes ───────────────────────────────────────────── */
  --grad-brand:   linear-gradient(135deg, var(--ph-blue), var(--ph-purple), var(--ph-magenta));
  --grad-blue-purple: linear-gradient(135deg, var(--ph-blue), var(--ph-purple));
  --grad-brand-top: linear-gradient(90deg, var(--ph-blue), var(--ph-purple), var(--ph-magenta));

  /* ── Tipografía ───────────────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Escala de tamaños */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  26px;
  --text-3xl:  36px;
  --text-4xl:  52px;
  --text-5xl:  72px;
  --text-6xl:  96px;

  /* Tracking */
  --track-tight:  0;
  --track-normal: 0.02em;
  --track-wide:   0.08em;
  --track-wider:  0.15em;
  --track-widest: 0.25em;

  /* ── Espaciado ────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Bordes ───────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* ── Transiciones ─────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* ── Sombras ──────────────────────────────────────────────── */
  --shadow-card: 0 8px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-btn:  0 4px 16px rgba(29,79,255,0.15);
  --shadow-modal:0 24px 80px rgba(0,0,0,0.8);

  /* ── Layout ───────────────────────────────────────────────── */
  --max-w-content: 480px;
  --max-w-wide:    640px;
  --max-w-full:    100%;
}