/**
 * Parallax Intelligence Brand Tokens v4.0
 * Spotify/Material You energy — gradient mesh, glass morphism, floating cards
 * WCAG 2.1 AA compliant text colors on dark backgrounds
 */

:root {
  /* Backgrounds — gradient mesh base */
  --c-bg:          #0a0e1a;
  --c-bg-1:        #0d1225;
  --c-bg-2:        #0f172a;
  --c-bg-3:        #1e1b4b;
  --c-surface:     rgba(255, 255, 255, 0.06);
  --c-surface-hi:  rgba(255, 255, 255, 0.10);

  /* Brand accents */
  --c-purple:      #7c3aed;
  --c-purple-hi:   #a78bfa;
  --c-purple-lo:   #4c1d95;
  --c-cyan:        #06b6d4;
  --c-cyan-hi:     #22d3ee;
  --c-cyan-lo:     #0891b2;
  --c-pink:        #ec4899;
  --c-pink-hi:     #f472b6;
  --c-green:       #10b981;

  /* Text — WCAG 2.1 AA compliant on --c-bg (#0a0e1a) */
  /* #f1f5f9 on #0a0e1a = 15.4:1 contrast ✓ */
  /* #cbd5e1 on #0a0e1a = 10.8:1 contrast ✓ */
  /* #94a3b8 on #0a0e1a = 6.3:1 contrast ✓ */
  --c-text:        #f1f5f9;
  --c-text-2:      #cbd5e1;
  --c-text-3:      #94a3b8;

  /* Borders */
  --c-border:      rgba(255, 255, 255, 0.08);
  --c-border-hi:   rgba(255, 255, 255, 0.15);
  --c-border-purple: rgba(124, 58, 237, 0.25);
  --c-border-cyan: rgba(6, 182, 212, 0.25);

  /* Glass morphism */
  --glass-bg:      rgba(255, 255, 255, 0.06);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-blur:    12px;
  /* Fallback for devices without backdrop-filter */
  --glass-bg-solid: rgba(15, 23, 42, 0.92);

  /* Glows */
  --glow-purple:   0 0 40px rgba(124, 58, 237, 0.3);
  --glow-cyan:     0 0 40px rgba(6, 182, 212, 0.3);
  --glow-pink:     0 0 40px rgba(236, 72, 153, 0.2);
  --glow-intense:  0 0 60px rgba(124, 58, 237, 0.25), 0 0 120px rgba(6, 182, 212, 0.12);

  /* Gradients */
  --grad-brand:    linear-gradient(135deg, #7c3aed 0%, #155e75 100%);
  --grad-hero:     linear-gradient(135deg, #7c3aed 0%, #06b6d4 50%, #ec4899 100%);
  --grad-mesh-1:   radial-gradient(ellipse at 20% 50%, rgba(124,58,237,0.15) 0%, transparent 50%);
  --grad-mesh-2:   radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.12) 0%, transparent 50%);
  --grad-mesh-3:   radial-gradient(ellipse at 50% 80%, rgba(236,72,153,0.08) 0%, transparent 50%);

  /* Typography */
  --font-heading:  'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;   --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;    --sp-20: 5rem;     --sp-24: 6rem;
  --sp-32: 8rem;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Z-index scale */
  --z-base: 0;
  --z-above: 10;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}