/* ==========================================================================
   Variant: SPOTIFY GREEN — true Spotify Premium identity.
   Pure black + Spotify green + white. The default for site/spotify.html.
   ========================================================================== */

:root {
  /* Surfaces — pure Spotify black */
  --bg-base:      #000000;
  --bg-elevated:  #121212;
  --bg-card:      #181818;
  --bg-overlay:   rgba(255, 255, 255, 0.03);
  --bg-overlay-2: rgba(255, 255, 255, 0.06);

  --border:    rgba(255, 255, 255, 0.08);
  --border-2:  rgba(255, 255, 255, 0.16);
  --border-3:  rgba(255, 255, 255, 0.24);

  /* SPOTIFY GREEN */
  --accent:       #1ED760;
  --accent-hi:    #1FDF64;
  --accent-lo:    #169C46;
  --accent-glow:  rgba(30, 215, 96, 0.42);
  --accent-faint: rgba(30, 215, 96, 0.10);

  /* Text — pure white, no warm tilt */
  --text:    #FFFFFF;
  --text-2:  #B3B3B3;
  --text-3:  #6A6A6A;
  --text-4:  #404040;

  --grad-accent:    linear-gradient(135deg, var(--accent) 0%, var(--accent-hi) 100%);
  --grad-text:      linear-gradient(180deg, #FFFFFF 0%, #B3B3B3 100%);
  --grad-text-pop:  linear-gradient(135deg, var(--accent-hi) 0%, var(--accent) 100%);

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --ease-out:    cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-inout:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-instant: 120ms; --d-quick: 180ms; --d-snap: 220ms; --d-soft: 320ms; --d-slow: 480ms;

  --container: 1200px; --container-md: 1080px; --container-sm: 760px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px;
  --z-grain: 9999; --z-bar: 60; --z-nav: 50; --z-sticky: 55; --z-canvas: 1; --z-content: 2;
}

:root {
  --gold: var(--accent); --gold-hi: var(--accent-hi); --gold-low: var(--accent-lo);
  --gold-glow: var(--accent-glow); --gold-faint: var(--accent-faint);
  --grad-gold: var(--grad-accent); --grad-text-gold: var(--grad-text-pop);
}