:root {
  /* ===== COLOR PALETTE ===== */
  /* Primary Brand Colors (Blue) */
  --primary-50:  hsl(220, 15%, 97%);
  --primary-100: hsl(220, 20%, 94%);
  --primary-200: hsl(220, 25%, 90%);
  --primary-300: hsl(220, 30%, 83%);
  --primary-400: hsl(220, 32%, 70%);  /* Music Catalog button level - ultra muted */
  --primary-500: hsl(220, 40%, 56%);  /* Interactive elements */
  --primary-600: hsl(220, 50%, 48%);  /* Buttons and links */
  --primary-700: hsl(220, 60%, 40%);  /* Active states */
  --primary-800: hsl(220, 65%, 32%);
  --primary-900: hsl(220, 70%, 24%);

  /* Secondary Colors (Gold) - refined, slightly desaturated for professionalism */
  --secondary-50:  hsl(45, 40%, 98%);
  --secondary-100: hsl(45, 42%, 96%);
  --secondary-200: hsl(45, 44%, 92%);
  --secondary-300: hsl(45, 50%, 84%);
  --secondary-400: hsl(45, 58%, 70%);
  --secondary-500: hsl(45, 65%, 52%);  /* primary gold accent */
  --secondary-600: hsl(45, 70%, 46%);
  --secondary-700: hsl(45, 75%, 38%);
  --secondary-800: hsl(45, 80%, 30%);
  --secondary-900: hsl(45, 85%, 22%);

  /* Neutral Colors */
  --gray-50: hsl(210, 20%, 98%);
  --gray-100: hsl(220, 14%, 96%);
  --gray-200: hsl(220, 13%, 91%);
  --gray-300: hsl(216, 12%, 84%);
  --gray-400: hsl(218, 11%, 65%);
  --gray-500: hsl(220, 9%, 46%);
  --gray-600: hsl(215, 14%, 34%);
  --gray-700: hsl(217, 19%, 27%);
  --gray-800: hsl(215, 28%, 17%);
  --gray-900: hsl(221, 39%, 11%);

  /* Semantic Colors */
  --success-50: #ecfdf5;
  --success-500: #10b981;
  --success-700: #047857;
  
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-700: #b45309;
  
  --error-50: #fef2f2;
  --error-500: #ef4444;
  --error-700: #b91c1c;
  
  --info-50: #eff6ff;
  --info-500: #3b82f6;
  --info-700: #1d4ed8;

  /* ===== NEW NAVIGATION COLORS ===== */
  /* Navigation-specific colors for the new design */
  --nav-bg-primary: #f8fafc;
  --nav-bg-secondary: #f1f5f9;
  --nav-bg-dark: #0f172a;
  --nav-bg-dark-secondary: #1e293b;
  --nav-bg-dark-tertiary: #334155;
  
  --nav-text-primary: #0f172a;
  --nav-text-secondary: #475569;
  --nav-text-muted: #64748b;
  --nav-text-dark: #cbd5e1;
  --nav-text-dark-muted: #94a3b8;
  
  --nav-border-light: #e2e8f0;
  --nav-border-dark: #334155;
  
  --nav-shadow-light: rgba(0,0,0,0.08);
  --nav-shadow-dark: rgba(0,0,0,0.5);
  
  --nav-gradient-primary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --nav-gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

  /* ===== TYPOGRAPHY ===== */
  /* Font Families - System fonts first for speed */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-secondary: Georgia, 'Times New Roman', Times, serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Sizes (Fluid Typography) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
  --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  --text-6xl: clamp(3.75rem, 3rem + 3.75vw, 5rem);

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ===== SPACING ===== */
  /* Base spacing unit */
  --space-unit: 0.25rem; /* 4px */
  
  /* Spacing scale */
  --space-0: 0;
  --space-1: calc(var(--space-unit) * 1);    /* 4px */
  --space-2: calc(var(--space-unit) * 2);    /* 8px */
  --space-3: calc(var(--space-unit) * 3);    /* 12px */
  --space-4: calc(var(--space-unit) * 4);    /* 16px */
  --space-5: calc(var(--space-unit) * 5);    /* 20px */
  --space-6: calc(var(--space-unit) * 6);    /* 24px */
  --space-8: calc(var(--space-unit) * 8);    /* 32px */
  --space-10: calc(var(--space-unit) * 10);  /* 40px */
  --space-12: calc(var(--space-unit) * 12);  /* 48px */
  --space-16: calc(var(--space-unit) * 16);  /* 64px */
  --space-20: calc(var(--space-unit) * 20);  /* 80px */
  --space-24: calc(var(--space-unit) * 24);  /* 96px */
  --space-32: calc(var(--space-unit) * 32);  /* 128px */

  /* ===== LAYOUT ===== */
  /* Container widths */
  --container-xs: 20rem;      /* 320px */
  --container-sm: 24rem;      /* 384px */
  --container-md: 28rem;      /* 448px */
  --container-lg: 32rem;      /* 512px */
  --container-xl: 36rem;      /* 576px */
  --container-2xl: 42rem;     /* 672px */
  --container-3xl: 48rem;     /* 768px */
  --container-4xl: 56rem;     /* 896px */
  --container-5xl: 64rem;     /* 1024px */
  --container-6xl: 72rem;     /* 1152px */
  --container-7xl: 80rem;     /* 1280px */
  --container-full: 100%;

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;


  
  /* Standard navigation height for consistent page layout */
  --nav-height: 96px;
  
  /* 
   * Page-specific nav height overrides:
   * To override navigation height on a specific page, add this to the page's <style> block:
   * 
   * :root {
   *   --nav-height: [desired-height]px;
   * }
   * 
   * This will override the global 96px default for that page only.
   * Remember to also update any fallback values in var(--nav-height, XXXpx) to match.
   */

  /* ===== EFFECTS ===== */
  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;      /* 2px */
  --radius-base: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;      /* 6px */
  --radius-lg: 0.5rem;        /* 8px */
  --radius-xl: 0.75rem;       /* 12px */
  --radius-2xl: 1rem;         /* 16px */
  --radius-3xl: 1.5rem;       /* 24px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Transitions */
  --transition-none: none;
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-slower: 500ms ease-in-out;

  /* Easing functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== COMPONENT SPECIFIC ===== */
  /* Z-index layers */
  --z-behind: -1;
  --z-base: 0;
  --z-docked: 10;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-banner: 1030;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* Blur effects */
  --blur-none: 0;
  --blur-sm: 4px;
  --blur-base: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* ===== GRADIENTS - Ultra Professional (Ultra Muted) ===== */
  --gradient-primary: linear-gradient(135deg, hsl(220, 40%, 56%) 0%, hsl(45, 60%, 52%) 100%);
  --gradient-secondary: linear-gradient(135deg, hsl(45, 60%, 52%) 0%, hsl(220, 40%, 56%) 100%);
  --gradient-warm: linear-gradient(135deg, hsl(45, 60%, 52%) 0%, hsl(45, 62%, 44%) 100%);
  --gradient-cool: linear-gradient(135deg, hsl(220, 40%, 56%) 0%, hsl(220, 45%, 48%) 100%);
  --gradient-sunset: linear-gradient(135deg, hsl(45, 25%, 96%) 0%, hsl(45, 60%, 52%) 50%, hsl(45, 70%, 24%) 100%);
  --gradient-ocean: linear-gradient(135deg, hsl(220, 30%, 66%) 0%, hsl(220, 32%, 70%) 20%, hsl(220, 35%, 56%) 50%);
  
  /* Glass morphism */
  --glass-background: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(13px);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

  /* ===== ABOUT PAGE LIGHT MODE VARIABLES ===== */
  /* Background colors */
  --about-bg-primary: hsl(210, 20%, 98%);
  --about-bg-secondary: hsl(220, 14%, 96%);
  --about-bg-tertiary: hsl(220, 13%, 91%);
  --about-bg-card: hsl(0, 0%, 100%);
  /* Subtle background gradient for About page (light) */
  --about-bg-gradient: linear-gradient(180deg, hsl(210, 20%, 98%) 0%, hsl(220, 14%, 96%) 60%, hsl(210, 20%, 98%) 100%);
  --about-bg-highlight: hsl(217, 19%, 27%);
  --about-bg-box: hsl(0, 0%, 100%);

  /* Text colors */
  --about-text-primary: hsl(221, 39%, 11%);
  --about-text-secondary: hsl(215, 28%, 17%);
  --about-text-tertiary: hsl(217, 19%, 27%);
  --about-text-muted: hsl(220, 9%, 46%);

  /* Border colors */
  --about-border-primary: hsl(220, 13%, 91%);
  --about-border-secondary: hsl(216, 12%, 84%);
  --about-border-muted: hsl(218, 11%, 65%);

  /* Gradient colors */
  --about-gradient-primary: linear-gradient(135deg, hsl(220, 40%, 56%) 0%, hsl(35, 50%, 56%) 100%);
  --about-gradient-secondary: linear-gradient(135deg, hsl(35, 50%, 56%) 0%, hsl(220, 40%, 56%) 100%);
  --about-gradient-highlight: linear-gradient(135deg, hsl(217, 19%, 27%) 0%, hsl(215, 14%, 34%) 50%, hsl(220, 9%, 46%) 100%);
  --about-gradient-box: linear-gradient(135deg, hsl(0, 0%, 100%) 0%, hsl(220, 14%, 96%) 50%, hsl(220, 13%, 91%) 100%);

  /* Accent colors */
  --about-accent-blue: hsl(220, 50%, 48%);
  --about-accent-purple: hsl(270, 50%, 48%);
  --about-accent-pink: hsl(330, 50%, 48%);
  --about-accent-orange: hsl(35, 70%, 48%);
  --about-accent-yellow: hsl(45, 70%, 48%);
  --about-accent-green: hsl(160, 50%, 48%);

  /* Grid background colors - subtle dark grid on light background */
  --grid-line-color: rgba(0, 0, 0, 0.02);
  --grid-background-color: hsl(210, 20%, 98%);

  /* ===== CHIP COLOR TOKENS (Light) ===== */
  /* Media types */
  --chip-video-bg: color-mix(in srgb, var(--error-500) 10%, white);
  --chip-video-border: color-mix(in srgb, var(--error-500) 40%, white);
  --chip-video-text: #7f1d1d; /* dark red */

  --chip-audio-bg: color-mix(in srgb, var(--info-500) 12%, white);
  --chip-audio-border: color-mix(in srgb, var(--info-500) 40%, white);
  --chip-audio-text: #1e3a8a; /* dark blue */

  --chip-spotify-bg: color-mix(in srgb, var(--success-500) 12%, white);
  --chip-spotify-border: color-mix(in srgb, var(--success-500) 40%, white);
  --chip-spotify-text: #065f46; /* dark green */

  --chip-score-bg: color-mix(in srgb, var(--warning-500) 12%, white);
  --chip-score-border: color-mix(in srgb, var(--warning-500) 40%, white);
  --chip-score-text: #92400e; /* dark amber */

  --chip-photo-bg: color-mix(in srgb, hsl(270, 80%, 60%) 12%, white);
  --chip-photo-border: color-mix(in srgb, hsl(270, 80%, 60%) 40%, white);
  --chip-photo-text: #581c87; /* violet-900 */

  /* Entities / categories */
  --chip-composition-bg: color-mix(in srgb, var(--primary-500) 10%, white);
  --chip-composition-border: color-mix(in srgb, var(--primary-500) 35%, white);
  --chip-composition-text: var(--primary-800);

  --chip-arrangement-bg: color-mix(in srgb, var(--error-500) 10%, white);
  --chip-arrangement-border: color-mix(in srgb, var(--error-500) 40%, white);
  --chip-arrangement-text: #7f1d1d; /* dark red */

  --chip-resource-bg: color-mix(in srgb, hsl(35, 85%, 55%) 12%, white);
  --chip-resource-border: color-mix(in srgb, hsl(35, 85%, 55%) 40%, white);
  --chip-resource-text: hsl(35, 80%, 25%);

  --chip-media-bg: color-mix(in srgb, hsl(220, 40%, 56%) 12%, white);
  --chip-media-border: color-mix(in srgb, hsl(220, 40%, 56%) 40%, white);
  --chip-media-text: hsl(220, 60%, 28%);

  /* Performance types / categories */
  --chip-solo-bg: color-mix(in srgb, hsl(280, 75%, 58%) 12%, white);
  --chip-solo-border: color-mix(in srgb, hsl(280, 75%, 58%) 40%, white);
  --chip-solo-text: hsl(280, 85%, 28%);

  --chip-live-bg: color-mix(in srgb, var(--error-500) 12%, white);
  --chip-live-border: color-mix(in srgb, var(--error-500) 40%, white);
  --chip-live-text: #7f1d1d; /* dark red */

  --chip-chamber-bg: color-mix(in srgb, hsl(170, 65%, 45%) 12%, white);
  --chip-chamber-border: color-mix(in srgb, hsl(170, 65%, 45%) 40%, white);
  --chip-chamber-text: hsl(175, 85%, 22%);

  --chip-multitrack-bg: color-mix(in srgb, hsl(45, 90%, 55%) 15%, white);
  --chip-multitrack-border: color-mix(in srgb, hsl(45, 90%, 55%) 45%, white);
  --chip-multitrack-text: hsl(45, 85%, 25%);

  --chip-performance-bg: color-mix(in srgb, var(--info-500) 10%, white);
  --chip-performance-border: color-mix(in srgb, var(--info-500) 35%, white);
  --chip-performance-text: #1e3a8a;

  /* News categories */
  --chip-updates-bg: color-mix(in srgb, hsl(200, 90%, 55%) 12%, white);
  --chip-updates-border: color-mix(in srgb, hsl(200, 90%, 55%) 40%, white);
  --chip-updates-text: hsl(205, 90%, 28%);

  --chip-events-bg: color-mix(in srgb, hsl(280, 75%, 58%) 12%, white);
  --chip-events-border: color-mix(in srgb, hsl(280, 75%, 58%) 40%, white);
  --chip-events-text: hsl(280, 85%, 28%);

  --chip-blog-bg: color-mix(in srgb, hsl(160, 70%, 45%) 12%, white);
  --chip-blog-border: color-mix(in srgb, hsl(160, 70%, 45%) 40%, white);
  --chip-blog-text: hsl(165, 80%, 22%);

  --chip-releases-bg: color-mix(in srgb, hsl(340, 80%, 58%) 12%, white);
  --chip-releases-border: color-mix(in srgb, hsl(340, 80%, 58%) 40%, white);
  --chip-releases-text: hsl(340, 85%, 30%);

  --chip-news-bg: color-mix(in srgb, hsl(45, 90%, 55%) 12%, white);
  --chip-news-border: color-mix(in srgb, hsl(45, 90%, 55%) 40%, white);
  --chip-news-text: hsl(45, 85%, 25%);

  /* Common news tags */
  --chip-announcement-bg: color-mix(in srgb, hsl(210, 85%, 58%) 12%, white);
  --chip-announcement-border: color-mix(in srgb, hsl(210, 85%, 58%) 40%, white);
  --chip-announcement-text: hsl(210, 90%, 28%);

  --chip-concert-bg: color-mix(in srgb, hsl(280, 70%, 55%) 12%, white);
  --chip-concert-border: color-mix(in srgb, hsl(280, 70%, 55%) 40%, white);
  --chip-concert-text: hsl(280, 85%, 28%);

  --chip-analysis-bg: color-mix(in srgb, hsl(170, 65%, 45%) 12%, white);
  --chip-analysis-border: color-mix(in srgb, hsl(170, 65%, 45%) 40%, white);
  --chip-analysis-text: hsl(175, 80%, 22%);

  --chip-education-bg: color-mix(in srgb, hsl(150, 70%, 45%) 12%, white);
  --chip-education-border: color-mix(in srgb, hsl(150, 70%, 45%) 40%, white);
  --chip-education-text: hsl(155, 85%, 22%);

  --chip-residency-bg: color-mix(in srgb, hsl(260, 70%, 55%) 12%, white);
  --chip-residency-border: color-mix(in srgb, hsl(260, 70%, 55%) 40%, white);
  --chip-residency-text: hsl(260, 85%, 28%);

  --chip-award-bg: color-mix(in srgb, hsl(45, 100%, 50%) 15%, white);
  --chip-award-border: color-mix(in srgb, hsl(45, 100%, 50%) 45%, white);
  --chip-award-text: hsl(45, 95%, 25%);

  --chip-commission-bg: color-mix(in srgb, hsl(25, 85%, 55%) 12%, white);
  --chip-commission-border: color-mix(in srgb, hsl(25, 85%, 55%) 40%, white);
  --chip-commission-text: hsl(25, 90%, 25%);

  --chip-premiere-bg: color-mix(in srgb, hsl(340, 85%, 58%) 12%, white);
  --chip-premiere-border: color-mix(in srgb, hsl(340, 85%, 58%) 40%, white);
  --chip-premiere-text: hsl(340, 90%, 28%);

  --chip-collaboration-bg: color-mix(in srgb, hsl(195, 75%, 50%) 12%, white);
  --chip-collaboration-border: color-mix(in srgb, hsl(195, 75%, 50%) 40%, white);
  --chip-collaboration-text: hsl(195, 85%, 25%);
}

/* ===== DARK MODE SUPPORT ===== */
[data-theme="dark"] {
  /* Dark mode neutral colors - reversed progression with HSL */
  --gray-50: hsl(221, 39%, 11%);
  --gray-100: hsl(215, 28%, 17%);
  --gray-200: hsl(217, 19%, 27%);
  --gray-300: hsl(215, 14%, 34%);
  --gray-400: hsl(220, 9%, 46%);
  --gray-500: hsl(218, 11%, 65%);
  --gray-600: hsl(216, 12%, 84%);
  --gray-700: hsl(220, 13%, 91%);
  --gray-800: hsl(220, 14%, 96%);
  --gray-900: hsl(210, 20%, 98%);

  /* Dark mode primary colors - slightly desaturated but more colorful than light mode */
  --primary-50: hsl(220, 55%, 24%);
  --primary-100: hsl(220, 60%, 32%);
  --primary-200: hsl(220, 65%, 40%);
  --primary-300: hsl(220, 70%, 48%);
  --primary-400: hsl(220, 75%, 56%);
  --primary-500: hsl(220, 80%, 70%);
  --primary-600: hsl(220, 85%, 83%);
  --primary-700: hsl(220, 90%, 90%);
  --primary-800: hsl(220, 95%, 94%);
  --primary-900: hsl(220, 100%, 97%);

  /* Dark mode secondary colors - same hue (35), reversed lightness */
  --secondary-50: hsl(35, 70%, 24%);
  --secondary-100: hsl(35, 75%, 32%);
  --secondary-200: hsl(35, 80%, 40%);
  --secondary-300: hsl(35, 85%, 48%);
  --secondary-400: hsl(35, 90%, 56%);
  --secondary-500: hsl(35, 95%, 70%);
  --secondary-600: hsl(35, 97%, 83%);
  --secondary-700: hsl(35, 98%, 90%);
  --secondary-800: hsl(35, 100%, 94%);
  --secondary-900: hsl(35, 100%, 97%);

  /* Dark mode glass effects */
  --glass-background: rgba(0, 0, 0, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);

  /* ===== DARK MODE NAVIGATION COLORS ===== */
  --nav-bg-primary: #0f172a;
  --nav-bg-secondary: #1e293b;
  --nav-bg-dark: #0f172a;
  --nav-bg-dark-secondary: #1e293b;
  --nav-bg-dark-tertiary: #334155;
  
  --nav-text-primary: white;
  --nav-text-secondary: #cbd5e1;
  --nav-text-muted: #94a3b8;
  --nav-text-dark: #cbd5e1;
  --nav-text-dark-muted: #94a3b8;
  
  --nav-border-light: #334155;
  --nav-border-dark: #334155;
  
  --nav-shadow-light: rgba(0,0,0,0.5);
  --nav-shadow-dark: rgba(0,0,0,0.5);
  
  --nav-gradient-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --nav-gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

  /* ===== ABOUT PAGE DARK MODE VARIABLES ===== */
  /* Background colors */
  --about-bg-primary: hsl(221, 39%, 11%);
  --about-bg-secondary: hsl(215, 28%, 17%);
  --about-bg-tertiary: hsl(217, 19%, 27%);
  --about-bg-card: hsl(215, 28%, 17%);
  /* Subtle background gradient for About page (dark) */
  --about-bg-gradient: linear-gradient(180deg, hsl(221, 39%, 11%) 0%, hsl(215, 28%, 17%) 60%, hsl(221, 39%, 11%) 100%);
  --about-bg-highlight: hsl(217, 19%, 27%);
  --about-bg-box: hsl(215, 28%, 17%);

  /* Text colors */
  --about-text-primary: hsl(210, 20%, 98%);
  --about-text-secondary: hsl(220, 14%, 96%);
  --about-text-tertiary: hsl(220, 13%, 91%);
  --about-text-muted: hsl(216, 12%, 84%);

  /* Border colors */
  --about-border-primary: hsl(217, 19%, 27%);
  --about-border-secondary: hsl(215, 14%, 34%);
  --about-border-muted: hsl(220, 9%, 46%);

  /* Gradient colors */
  --about-gradient-primary: linear-gradient(135deg, hsl(220, 80%, 70%) 0%, hsl(35, 95%, 70%) 100%);
  --about-gradient-secondary: linear-gradient(135deg, hsl(35, 95%, 70%) 0%, hsl(220, 80%, 70%) 100%);
  --about-gradient-highlight: linear-gradient(135deg, hsl(217, 19%, 27%) 0%, hsl(215, 14%, 34%) 50%, hsl(220, 9%, 46%) 100%);
  --about-gradient-box: linear-gradient(135deg, hsl(215, 28%, 17%) 0%, hsl(217, 19%, 27%) 50%, hsl(220, 13%, 91%) 100%);

  /* Accent colors */
  --about-accent-blue: hsl(220, 85%, 83%);
  --about-accent-purple: hsl(270, 85%, 83%);
  --about-accent-pink: hsl(330, 85%, 83%);
  --about-accent-orange: hsl(35, 95%, 70%);
  --about-accent-yellow: hsl(45, 95%, 70%);
  --about-accent-green: hsl(160, 85%, 83%);

  /* Grid background colors - subtle light grid on dark background */
  --grid-line-color: rgba(255, 255, 255, 0.03);
  --grid-background-color: hsl(221, 39%, 11%);

  /* ===== CHIP COLOR TOKENS (Dark) ===== */
  /* Boost contrast in dark by mixing with gray-800 */
  --chip-video-bg: color-mix(in srgb, var(--error-500) 22%, var(--gray-800));
  --chip-video-border: color-mix(in srgb, var(--error-500) 55%, transparent);
  --chip-video-text: #fecaca; /* red-200 */

  --chip-audio-bg: color-mix(in srgb, var(--info-500) 22%, var(--gray-800));
  --chip-audio-border: color-mix(in srgb, var(--info-500) 55%, transparent);
  --chip-audio-text: #bfdbfe; /* blue-200 */

  --chip-spotify-bg: color-mix(in srgb, var(--success-500) 22%, var(--gray-800));
  --chip-spotify-border: color-mix(in srgb, var(--success-500) 55%, transparent);
  --chip-spotify-text: #bbf7d0; /* green-200 */

  --chip-score-bg: color-mix(in srgb, var(--warning-500) 22%, var(--gray-800));
  --chip-score-border: color-mix(in srgb, var(--warning-500) 55%, transparent);
  --chip-score-text: #fde68a; /* amber-200 */

  --chip-photo-bg: color-mix(in srgb, hsl(270, 80%, 60%) 22%, var(--gray-800));
  --chip-photo-border: color-mix(in srgb, hsl(270, 80%, 60%) 55%, transparent);
  --chip-photo-text: #e9d5ff; /* violet-200 */

  --chip-composition-bg: color-mix(in srgb, var(--primary-500) 22%, var(--gray-800));
  --chip-composition-border: color-mix(in srgb, var(--primary-500) 55%, transparent);
  --chip-composition-text: var(--primary-200);

  --chip-arrangement-bg: color-mix(in srgb, var(--error-500) 22%, var(--gray-800));
  --chip-arrangement-border: color-mix(in srgb, var(--error-500) 55%, transparent);
  --chip-arrangement-text: #fecaca; /* red-200 */

  --chip-resource-bg: color-mix(in srgb, hsl(35, 85%, 55%) 22%, var(--gray-800));
  --chip-resource-border: color-mix(in srgb, hsl(35, 85%, 55%) 55%, transparent);
  --chip-resource-text: hsl(35, 95%, 80%);

  --chip-media-bg: color-mix(in srgb, hsl(220, 40%, 56%) 22%, var(--gray-800));
  --chip-media-border: color-mix(in srgb, hsl(220, 40%, 56%) 55%, transparent);
  --chip-media-text: hsl(220, 80%, 85%);

  /* Performance types / categories (dark) */
  --chip-solo-bg: color-mix(in srgb, hsl(280, 75%, 58%) 22%, var(--gray-800));
  --chip-solo-border: color-mix(in srgb, hsl(280, 75%, 58%) 55%, transparent);
  --chip-solo-text: hsl(280, 95%, 82%);

  --chip-live-bg: color-mix(in srgb, var(--error-500) 22%, var(--gray-800));
  --chip-live-border: color-mix(in srgb, var(--error-500) 55%, transparent);
  --chip-live-text: #fecaca; /* red-200 */

  --chip-chamber-bg: color-mix(in srgb, hsl(170, 65%, 45%) 22%, var(--gray-800));
  --chip-chamber-border: color-mix(in srgb, hsl(170, 65%, 45%) 55%, transparent);
  --chip-chamber-text: hsl(170, 85%, 78%);

  --chip-multitrack-bg: color-mix(in srgb, hsl(45, 90%, 55%) 22%, var(--gray-800));
  --chip-multitrack-border: color-mix(in srgb, hsl(45, 90%, 55%) 55%, transparent);
  --chip-multitrack-text: hsl(45, 100%, 82%);

  --chip-performance-bg: color-mix(in srgb, var(--info-500) 22%, var(--gray-800));
  --chip-performance-border: color-mix(in srgb, var(--info-500) 55%, transparent);
  --chip-performance-text: #bfdbfe;

  /* News categories (dark) */
  --chip-updates-bg: color-mix(in srgb, hsl(200, 90%, 55%) 22%, var(--gray-800));
  --chip-updates-border: color-mix(in srgb, hsl(200, 90%, 55%) 55%, transparent);
  --chip-updates-text: hsl(200, 95%, 82%);

  --chip-events-bg: color-mix(in srgb, hsl(280, 75%, 58%) 22%, var(--gray-800));
  --chip-events-border: color-mix(in srgb, hsl(280, 75%, 58%) 55%, transparent);
  --chip-events-text: hsl(280, 95%, 82%);

  --chip-blog-bg: color-mix(in srgb, hsl(160, 70%, 45%) 22%, var(--gray-800));
  --chip-blog-border: color-mix(in srgb, hsl(160, 70%, 45%) 55%, transparent);
  --chip-blog-text: hsl(160, 95%, 80%);

  --chip-releases-bg: color-mix(in srgb, hsl(340, 80%, 58%) 22%, var(--gray-800));
  --chip-releases-border: color-mix(in srgb, hsl(340, 80%, 58%) 55%, transparent);
  --chip-releases-text: hsl(340, 95%, 82%);

  --chip-news-bg: color-mix(in srgb, hsl(45, 90%, 55%) 22%, var(--gray-800));
  --chip-news-border: color-mix(in srgb, hsl(45, 90%, 55%) 55%, transparent);
  --chip-news-text: hsl(45, 95%, 82%);

  /* Common news tags (dark) */
  --chip-announcement-bg: color-mix(in srgb, hsl(210, 85%, 58%) 22%, var(--gray-800));
  --chip-announcement-border: color-mix(in srgb, hsl(210, 85%, 58%) 55%, transparent);
  --chip-announcement-text: hsl(210, 95%, 82%);

  --chip-concert-bg: color-mix(in srgb, hsl(280, 70%, 55%) 22%, var(--gray-800));
  --chip-concert-border: color-mix(in srgb, hsl(280, 70%, 55%) 55%, transparent);
  --chip-concert-text: hsl(280, 95%, 82%);

  --chip-analysis-bg: color-mix(in srgb, hsl(170, 65%, 45%) 22%, var(--gray-800));
  --chip-analysis-border: color-mix(in srgb, hsl(170, 65%, 45%) 55%, transparent);
  --chip-analysis-text: hsl(175, 95%, 80%);

  --chip-education-bg: color-mix(in srgb, hsl(150, 70%, 45%) 22%, var(--gray-800));
  --chip-education-border: color-mix(in srgb, hsl(150, 70%, 45%) 55%, transparent);
  --chip-education-text: hsl(155, 95%, 80%);

  --chip-residency-bg: color-mix(in srgb, hsl(260, 70%, 55%) 22%, var(--gray-800));
  --chip-residency-border: color-mix(in srgb, hsl(260, 70%, 55%) 55%, transparent);
  --chip-residency-text: hsl(260, 95%, 82%);

  --chip-award-bg: color-mix(in srgb, hsl(45, 100%, 50%) 22%, var(--gray-800));
  --chip-award-border: color-mix(in srgb, hsl(45, 100%, 50%) 55%, transparent);
  --chip-award-text: hsl(45, 100%, 82%);

  --chip-commission-bg: color-mix(in srgb, hsl(25, 85%, 55%) 22%, var(--gray-800));
  --chip-commission-border: color-mix(in srgb, hsl(25, 85%, 55%) 55%, transparent);
  --chip-commission-text: hsl(25, 95%, 80%);

  --chip-premiere-bg: color-mix(in srgb, hsl(340, 85%, 58%) 22%, var(--gray-800));
  --chip-premiere-border: color-mix(in srgb, hsl(340, 85%, 58%) 55%, transparent);
  --chip-premiere-text: hsl(340, 95%, 82%);

  --chip-collaboration-bg: color-mix(in srgb, hsl(195, 75%, 50%) 22%, var(--gray-800));
  --chip-collaboration-border: color-mix(in srgb, hsl(195, 75%, 50%) 55%, transparent);
  --chip-collaboration-text: hsl(195, 95%, 80%);
}

/* ===== FOOTER DARK MODE OVERRIDE ===== */
/* Keep footer unchanged in dark mode - it's already dark and professional */
[data-theme="dark"] .main-footer {
  background: var(--gray-900) !important;
  color: var(--gray-100) !important;
  border-top: none !important;
}

[data-theme="dark"] .footer-column-title {
  color: var(--gray-100) !important;
}

[data-theme="dark"] .footer-nav-links a {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .footer-nav-links a:hover {
  color: var(--gray-100) !important;
}

[data-theme="dark"] .newsletter-section {
  background: transparent !important;
  border: 1px solid var(--gray-700) !important;
}

[data-theme="dark"] .newsletter-title {
  color: var(--gray-100) !important;
}

[data-theme="dark"] .newsletter-description {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .newsletter-input {
  background: var(--gray-800) !important;
  border: 2px solid var(--gray-700) !important;
  color: var(--gray-100) !important;
}

[data-theme="dark"] .newsletter-input:focus {
  border-color: var(--primary-500) !important;
}

[data-theme="dark"] .footer-copyright {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .social-link {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .social-link:hover {
  color: var(--gray-100) !important;
}

[data-theme="dark"] .footer-nav-title {
  color: var(--gray-100) !important;
}

[data-theme="dark"] .footer-nav-title:hover {
  color: var(--primary-400) !important;
}

[data-theme="dark"] .contact-link {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .contact-link:hover {
  color: var(--primary-400) !important;
}

[data-theme="dark"] .privacy-note {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .newsletter-success {
  background: var(--success-700) !important;
  border: 1px solid var(--success-500) !important;
}

[data-theme="dark"] .newsletter-success p {
  color: var(--success-50) !important;
}

/* ===== UTILITY CLASSES ===== */
.container {
  max-width: var(--container-7xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.glass {
  background: var(--glass-background);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}