/* ============================================
   CSS VARIABLES - Jason Wells Music
   ============================================ */

:root {
    /* ===== COLOR PALETTE ===== */
    /* Primary Accent Color - Change this to switch themes! */
    --color-primary: #4A9EFF;
    /* Electric Blue (default) */
    /* Alternative options (uncomment to use):
     --color-primary: #1DB9C3;        Deep Teal
     --color-primary: #8B5CF6;        Vibrant Purple
     --color-primary: #DC2626;        Crimson Red
     --color-primary: #d4af37;        Gold (original)
  */

    --color-primary-hover: #6BB0FF;
    /* Lighter version for hover */
    --color-primary-dark: #3A7FCC;
    /* Darker version */

    /* Background Colors */
    --color-bg-black: #000000;
    /* Pure black */
    --color-bg-darker: #000000;
    /* Darkest sections (now pure black) */
    --color-bg-dark: #000000;
    /* Main background (now pure black) */
    --color-bg-medium: #0a0a0a;
    /* Cards, inputs (very dark gray) */
    --color-bg-light: #1a1a1a;
    /* Lighter elements */

    /* Text Colors */
    --color-text: #ffffff;
    /* Primary white text */
    --color-text-light: #dddddd;
    /* Slightly muted */
    --color-text-muted: #aaaaaa;
    /* Muted text */
    --color-text-dark: #666666;
    /* Very muted */

    /* UI Element Colors */
    --color-border: #333333;
    /* Default borders */
    --color-border-light: #444444;
    /* Lighter borders */

    /* Button Colors */
    --color-button-primary: var(--color-primary);
    --color-button-secondary: #555555;
    --color-button-secondary-hover: #666666;

    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Arial', 'Helvetica', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Font Sizes */
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-lg: 24px;
    --font-size-xl: 26px;
    --font-size-2xl: 32px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;

    /* ===== SPACING ===== */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;
    --spacing-4xl: 60px;
    --spacing-5xl: 80px;

    /* ===== LAYOUT ===== */
    --container-max-width: 1200px;
    --container-wide: 1400px;
    --container-narrow: 900px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 15px 40px rgba(0, 0, 0, 0.6);

    /* Primary color glow effect */
    --shadow-primary: 0 0 20px rgba(74, 158, 255, 0.3);
    --shadow-primary-lg: 0 15px 40px rgba(74, 158, 255, 0.4);

    /* ===== BORDERS ===== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* ===== Z-INDEX ===== */
    --z-header: 1000;
    --z-mobile-menu: 2000;
    --z-modal: 3000;
    --z-tooltip: 4000;
}