:root {
  /* Marca */
  --gradient-brand: linear-gradient(135deg, #8B5CF6 0%, #6366F1 45%, #3B82F6 100%);
  --gradient-brand-strong: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);

  /* Acento "hype" neón (raíz underground) + glows reutilizables */
  --color-hype:      #FF3D9A;
  --gradient-hype:   linear-gradient(135deg, #FF3D9A 0%, #8B5CF6 100%);
  --glow-brand:      0 0 40px rgba(139, 92, 246, 0.45);
  --glow-hype:       0 0 28px rgba(255, 61, 154, 0.45);

  /* Tema OSCURO (por defecto) */
  --color-bg:            #0A0A0F;
  --color-surface:       #121219;
  --color-surface-2:     #1C1C26;
  --color-text:          #F6F6FB;
  --color-text-muted:    #9A9AAE;
  --color-border:        rgba(255, 255, 255, 0.08);

  --color-primary:       #8B5CF6;
  --color-primary-hover: #A78BFA;
  --color-on-primary:    #FFFFFF;
  --color-accent:        #3B82F6;
  --color-focus-ring:    #A78BFA;

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-3xl:  clamp(2.25rem, 1.6rem + 3.4vw, 4rem);

  --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;

  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 20px;  --radius-full: 9999px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.45);
  --shadow-glow: 0 8px 30px rgba(139, 92, 246, 0.35);

  --transition-fast: 150ms ease;
  --transition:      250ms cubic-bezier(0.4, 0, 0.2, 1);

  --container-max: 1200px;
  --header-h: 64px;
  --player-h: 72px;
}

[data-theme="light"] {
  --color-bg:            #FFFFFF;
  --color-surface:       #F6F6FB;
  --color-surface-2:     #ECECF3;
  --color-text:          #121219;
  --color-text-muted:    #5B5B6E;
  --color-border:        rgba(10, 10, 15, 0.10);

  --color-primary:       #7C3AED;
  --color-primary-hover: #6D28D9;
  --color-on-primary:    #FFFFFF;
  --color-focus-ring:    #7C3AED;

  --shadow-sm:  0 1px 2px rgba(10,10,15,0.08);
  --shadow-md:  0 6px 20px rgba(10,10,15,0.10);
  --shadow-glow: 0 8px 30px rgba(124, 58, 237, 0.25);

  --color-hype:  #E11D74;
  --glow-brand:  0 0 32px rgba(124, 58, 237, 0.25);
  --glow-hype:   0 0 24px rgba(225, 29, 116, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}