:root {
  /* NLT Hip Hop & Music Palette - High-End Studio Theme */
  --bg-primary: #110e06;        /* Obsidian Gold (Obsidian black with warm gold undertones) */
  --bg-secondary: #1a160d;      /* Warm Studio Charcoal (Dark brown-black slate) */
  --bg-tertiary: #231f15;       /* Vintage Wood Panel (Subdued brown-bronze) */
  --bg-glass: rgba(17, 14, 6, 0.86);
  --bg-glass-heavy: rgba(26, 22, 13, 0.96);
  
  --border-color: rgba(91, 97, 106, 0.25);        /* Slate Gray transparentized */
  --border-color-hover: rgba(224, 176, 39, 0.45);  /* Deep Gold border highlight */
  --border-glow: rgba(224, 176, 39, 0.12);
  --border-glow-active: rgba(255, 216, 46, 0.3);

  --text-primary: #f8f7f4;      /* Off-White Cream for rich editorial reading */
  --text-secondary: #b0b4ba;    /* Warm Slate Gray for readable paragraph blocks */
  --text-muted: #5b616a;        /* Pure Slate Gray for small tags and inactive menu markers */

  /* Accent Branding: Deep Warm Gold (Primary), Bright Sun Gold (Highlights) and Olive Bronze (Shadows) */
  --accent-gold-deep: #e0b027;
  --accent-gold-deep-rgb: 224, 176, 39;
  --accent-gold-bright: #ffd82e;
  --accent-gold-bright-rgb: 255, 216, 46;
  --accent-bronze: #614b11;
  --accent-bronze-rgb: 97, 75, 17;
  --accent-slate: #5b616a;
  
  /* Fallbacks & Aliases for Layout Compatibility */
  --accent-color: var(--accent-gold-deep);
  --accent-rgb: var(--accent-gold-deep-rgb);
  --transition-speed: 0.3s;

  /* Typography: Aggressive, heavy editorial title face alongside crisp readable sans-serif */
  --font-heading: 'Archivo Black', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;

  /* Layout & Spacing */
  --max-width: 1200px;
  --header-height: 80px;
  --container-padding: 2.5rem;
  --container-padding-mobile: 1.25rem;
  
  /* UI Design Tokens */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;
  --border-radius-full: 9999px;
  
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  --shadow-glow-cyan: 0 0 25px rgba(224, 176, 39, 0.15); /* Remapped for legacy cyan class compatibility */
  --shadow-glow-violet: 0 0 25px rgba(97, 75, 17, 0.2);   /* Remapped for legacy violet class compatibility */
  --shadow-glow-gold: 0 0 25px rgba(224, 176, 39, 0.15);
  --shadow-glow-bright: 0 0 25px rgba(255, 216, 46, 0.22);
  --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
  :root {
    --header-height: 70px;
    --container-padding: 1.5rem;
  }
}