/* ============================================
   CSS CUSTOM PROPERTIES & DESIGN TOKENS
   DJ Style Misho - Professional Design System
   ============================================ */

:root {
    /* ===== COLOR PALETTE ===== */
    /* Premium Dark Background Layers */
    --color-dark-primary: #0f0f1e;
    --color-dark-secondary: #1a1a2e;
    --color-dark-tertiary: #2d2d4a;
    --color-dark-quaternary: #3d3d5c;

    /* Vibrant Gold Accents */
    --color-accent-purple: #ffd700;
    --color-accent-purple-light: #ffed4e;
    --color-accent-purple-lighter: #fffacd;
    --color-accent-purple-dark: #daa520;

    /* Vivid Cyan Accents */
    --color-accent-blue: #00d9ff;
    --color-accent-blue-light: #66e6ff;
    --color-accent-blue-lighter: #99edff;
    --color-accent-blue-dark: #00b8cc;

    /* Rose & Magenta Highlights */
    --color-cyan: #ff006e;
    --color-cyan-light: #ff4d8f;
    --color-magenta: #fb5607;
    --color-magenta-light: #ff8c42;

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #f0f0f0;
    --color-text-tertiary: #b0b0c0;
    --color-text-quaternary: #808090;

    /* ===== TYPOGRAPHY ===== */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes (Fluid Typography) */
    --font-size-xs: clamp(0.75rem, 1vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 1.2vw, 1rem);
    --font-size-base: clamp(1rem, 1.5vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 2vw, 1.5rem);
    --font-size-xl: clamp(1.5rem, 3vw, 2rem);
    --font-size-2xl: clamp(2rem, 5vw, 3.75rem);
    --font-size-3xl: clamp(3rem, 8vw, 6.5rem);

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

    --touch-target-min: 48px;  /* Minimum touch target size */
    --touch-padding: 0.75rem;   /* Padding for touch targets */
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* ===== SHADOWS & GLOWS ===== */
    --shadow-glow-purple: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.3);
    --shadow-glow-blue: 0 0 30px rgba(0, 217, 255, 0.5), 0 0 60px rgba(0, 217, 255, 0.3);
    --shadow-glow-cyan: 0 0 30px rgba(255, 0, 110, 0.5), 0 0 60px rgba(255, 0, 110, 0.3);
    --shadow-glow-magenta: 0 0 30px rgba(255, 77, 143, 0.5), 0 0 60px rgba(255, 77, 143, 0.3);
    --shadow-glow-intense: 0 0 50px rgba(255, 215, 0, 0.6), 0 0 100px rgba(0, 217, 255, 0.4);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 1px rgba(168, 85, 247, 0.15);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 2px rgba(168, 85, 247, 0.2);

    /* ===== BORDERS & RADIUS ===== */
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.625rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius-full: 9999px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-slow: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== BREAKPOINTS (for reference in JS) ===== */
    --breakpoint-xs: 375px;  /* Small iPhones */
    --breakpoint-sm: 480px;  /* iPhone SE */
    --breakpoint-md: 768px;  /* iPad */
    --breakpoint-lg: 1024px; /* Tablet */
    --breakpoint-xl: 1440px; /* Desktop */

    /* ===== Z-INDEX LAYERS ===== */
    --z-index-negative: -1;
    --z-index-base: 0;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-header: 1000;
    --z-index-modal: 2000;
    --z-index-preloader: 9999;

    /* ===== LAYOUT ===== */
    --max-width-container: 1440px;
    --header-height: 4.5rem;
    --header-height-mobile: 3.5rem;
    --header-height-small: 3.25rem;  /* For small iPhones */

    /* ===== EFFECTS ===== */
    --blur-sm: 10px;
    --blur-md: 15px;
    --blur-lg: 20px;
    --blur-xl: 25px;

    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-accent-blue) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-cyan) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-accent-purple) 100%);
    --gradient-text: linear-gradient(135deg, var(--color-accent-purple-light), var(--color-accent-blue-light));

    /* Background Gradients */
    --gradient-bg-dark: linear-gradient(135deg, rgba(6, 6, 9, 0.5) 0%, rgba(15, 15, 26, 0.5) 100%);
    --gradient-bg-light: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.06) 100%);
}

/* ===== DARK MODE OVERRIDES ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Already optimized for dark mode */
    }
}

/* ===== LIGHT MODE (if needed) ===== */
[data-theme="light"] {
    --color-dark-primary: #ffffff;
    --color-dark-secondary: #f8f9fa;
    --color-dark-tertiary: #e9ecef;
    --color-text-primary: #1a1a2e;
    --color-text-secondary: #2d3748;
    --color-text-tertiary: #4a5568;
}

/* ===== RESPONSIVE FONT SIZES ===== */
@media (max-width: 1024px) {
    :root {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    :root {
        font-size: 14px;
        --header-height: var(--header-height-mobile);
    }
}

@media (max-width: 480px) {
    :root {
        font-size: 13px;
        --header-height-mobile: var(--header-height-small);
    }
}

/* ===== IPHONE SPECIFIC OPTIMIZATIONS ===== */
@media (max-width: 425px) {
    :root {
        font-size: 12.5px;
    }
}

@media (max-width: 375px) {
    :root {
        font-size: 12px;
    }
}

/* ===== CUSTOM PROPERTIES FOR DYNAMIC VALUES ===== */
:root {
    --scroll-velocity: 0;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --safe-area-left: max(0px, env(safe-area-inset-left));
    --safe-area-right: max(0px, env(safe-area-inset-right));
    --safe-area-top: max(0px, env(safe-area-inset-top));
    --safe-area-bottom: max(0px, env(safe-area-inset-bottom));
}