/* ========================================
   SOUNDGUY PRODUCTIONS - ENHANCED STYLING
   XLB-Inspired Professional Design System
   ======================================== */

:root {
    /* ========================================
       PRIMARY BRAND COLORS - Navy Blue
       From logo analysis: #003F87
       ======================================== */
    --brand-navy-50: #e6f0ff;
    --brand-navy-100: #cce0ff;
    --brand-navy-200: #99c2ff;
    --brand-navy-300: #66a3ff;
    --brand-navy-400: #3385ff;
    --brand-navy-500: #003F87; /* Primary navy from logo */
    --brand-navy-600: #003366;
    --brand-navy-700: #00264d;
    --brand-navy-800: #001a33;
    --brand-navy-900: #000d1a;

    /* ========================================
       SECONDARY BRAND COLORS - Bright Cyan
       From logo analysis: #00A8E8
       ======================================== */
    --brand-cyan-50: #e6f9ff;
    --brand-cyan-100: #ccf3ff;
    --brand-cyan-200: #99e7ff;
    --brand-cyan-300: #66dbff;
    --brand-cyan-400: #33cfff;
    --brand-cyan-500: #00A8E8; /* Primary cyan from logo */
    --brand-cyan-600: #0086ba;
    --brand-cyan-700: #00658b;
    --brand-cyan-800: #00435c;
    --brand-cyan-900: #00222e;

    /* ========================================
       COMPLEMENTARY PALETTE - Cool Grays
       Professional neutrals for dark theme
       ======================================== */
    --cool-gray-50: #f8f9fa;
    --cool-gray-100: #f1f3f5;
    --cool-gray-200: #e9ecef;
    --cool-gray-300: #dee2e6;
    --cool-gray-400: #ced4da;
    --cool-gray-500: #adb5bd;
    --cool-gray-600: #6c757d;
    --cool-gray-700: #495057;
    --cool-gray-800: #343a40;
    --cool-gray-900: #212529;

    /* ========================================
       DARK MODE PALETTE
       Darker grays for dark theme compatibility
       ======================================== */
    --dark-bg-primary: #1F2937; /* Existing SGP background */
    --dark-bg-secondary: #111827;
    --dark-bg-tertiary: #374151;
    --dark-text-primary: #F9FAFB;
    --dark-text-secondary: #D1D5DB;
    --dark-text-muted: #9CA3AF;

    /* ========================================
       FLUID TYPOGRAPHY
       Responsive sizing without breakpoints
       ======================================== */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8125rem + 0.25vw, 1rem);
    --text-base: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 0.9688rem + 0.5vw, 1.25rem);
    --text-xl: clamp(1.25rem, 0.9375rem + 1vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.1875rem + 1vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.4063rem + 1.5vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.5rem + 2.5vw, 3rem);
    --text-5xl: clamp(3rem, 1.875rem + 3.75vw, 4rem);
    --text-6xl: clamp(4rem, 2.5rem + 5vw, 6rem);

    /* Fluid Typography Utility Classes */
    --text-fluid-xs: var(--text-xs);
    --text-fluid-sm: var(--text-sm);
    --text-fluid-base: var(--text-base);
    --text-fluid-lg: var(--text-lg);
    --text-fluid-xl: var(--text-xl);
    --text-fluid-2xl: var(--text-2xl);
    --text-fluid-3xl: var(--text-3xl);
    --text-fluid-4xl: var(--text-4xl);
    --text-fluid-5xl: var(--text-5xl);
    --text-fluid-6xl: var(--text-6xl);

    /* ========================================
       PROFESSIONAL SHADOW SYSTEM
       Enhanced depth and dimension
       ======================================== */
    --shadow-xs: 1px 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-sm: 2px 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 4px 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 6px 6px 12px rgba(0, 0, 0, 0.2);
    --shadow-xl: 8px 8px 16px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 12px 12px 24px rgba(0, 0, 0, 0.3);

    /* Specialized Shadows */
    --shadow-soft: 6px 6px 9px rgba(0, 0, 0, 0.1);
    --shadow-bold: 8px 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-crisp: 6px 6px 0px rgba(0, 168, 232, 0.3); /* Cyan accent */
    --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --shadow-glow-cyan: 0 0 20px rgba(0, 168, 232, 0.4);
    --shadow-glow-navy: 0 0 20px rgba(0, 63, 135, 0.4);

    /* ========================================
       TRANSITIONS & ANIMATIONS
       Smooth, professional movement
       ======================================== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========================================
       BORDER RADIUS
       Consistent rounded corners
       ======================================== */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* ========================================
       SPACING SYSTEM
       Consistent spacing scale
       ======================================== */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ========================================
       Z-INDEX SCALE
       Layering hierarchy
       ======================================== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;

    /* ========================================
       COMPONENT-SPECIFIC VARIABLES
       ======================================== */
    --header-height: 5rem;
    --section-padding: 4rem;
    --container-max-width: 1280px;
    --content-max-width: 65ch;
}

/* ========================================
   FLUID TYPOGRAPHY UTILITY CLASSES
   ======================================== */
.text-fluid-xs { font-size: var(--text-fluid-xs); }
.text-fluid-sm { font-size: var(--text-fluid-sm); }
.text-fluid-base { font-size: var(--text-fluid-base); }
.text-fluid-lg { font-size: var(--text-fluid-lg); }
.text-fluid-xl { font-size: var(--text-fluid-xl); }
.text-fluid-2xl { font-size: var(--text-fluid-2xl); }
.text-fluid-3xl { font-size: var(--text-fluid-3xl); }
.text-fluid-4xl { font-size: var(--text-fluid-4xl); }
.text-fluid-5xl { font-size: var(--text-fluid-5xl); }
.text-fluid-6xl { font-size: var(--text-fluid-6xl); }

/* ========================================
   ENHANCED BUTTON COMPONENTS
   Professional hover effects
   ======================================== */
.btn-enhanced {
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.btn-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-bold);
}

.btn-enhanced:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-cyan-enhanced {
    background: var(--brand-cyan-500);
    color: white;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.btn-cyan-enhanced:hover {
    background: var(--brand-cyan-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-cyan);
}

.btn-navy-enhanced {
    background: var(--brand-navy-500);
    color: white;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.btn-navy-enhanced:hover {
    background: var(--brand-navy-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-navy);
}

/* ========================================
   ENHANCED CARD COMPONENTS
   Lifted cards with hover effects
   ======================================== */
.card-enhanced {
    background: var(--dark-bg-tertiary);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
}

.card-cyan-accent {
    border-left: 4px solid var(--brand-cyan-500);
}

.card-navy-accent {
    border-left: 4px solid var(--brand-navy-500);
}

.card-crisp {
    box-shadow: var(--shadow-crisp);
}

.card-crisp:hover {
    box-shadow: 8px 8px 0px rgba(0, 168, 232, 0.4);
    transform: translate(-2px, -2px);
}

/* ========================================
   GRADIENT TEXT EFFECTS
   ======================================== */
.text-gradient-cyan {
    background: linear-gradient(135deg, var(--brand-cyan-400), var(--brand-cyan-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-navy {
    background: linear-gradient(135deg, var(--brand-navy-400), var(--brand-navy-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-brand {
    background: linear-gradient(135deg, var(--brand-navy-500), var(--brand-cyan-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   IMAGE OVERLAY EFFECTS
   Hover reveal with gradient
   ======================================== */
.image-overlay {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.image-overlay img {
    transition: var(--transition-slow);
}

.image-overlay:hover img {
    transform: scale(1.05);
}

.image-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transform: translateY(100%);
    transition: var(--transition-base);
}

.image-overlay:hover .image-overlay-content {
    transform: translateY(0);
}

/* ========================================
   BACKDROP BLUR UTILITIES
   Modern glass effect
   ======================================== */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ========================================
   HOVER SCALE UTILITIES
   Subtle zoom effects
   ======================================== */
.hover-scale {
    transition: var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale-sm {
    transition: var(--transition-base);
}

.hover-scale-sm:hover {
    transform: scale(1.02);
}

.hover-scale-lg {
    transition: var(--transition-base);
}

.hover-scale-lg:hover {
    transform: scale(1.1);
}

/* ========================================
   SECTION BACKGROUNDS
   Themed section styles
   ======================================== */
.section-navy {
    background: var(--brand-navy-900);
}

.section-navy-gradient {
    background: linear-gradient(135deg, var(--brand-navy-900), var(--brand-navy-700));
}

.section-cyan {
    background: var(--brand-cyan-900);
}

.section-cyan-gradient {
    background: linear-gradient(135deg, var(--brand-cyan-900), var(--brand-cyan-700));
}

.section-dark {
    background: var(--dark-bg-secondary);
}

.section-darker {
    background: #0a0e1a;
}

.section-gradient-brand {
    background: linear-gradient(135deg, var(--brand-navy-900), var(--dark-bg-primary), var(--brand-cyan-900));
}

/* ========================================
   ANIMATION UTILITIES
   Scroll-triggered fade-ins
   ======================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   STAGGERED ANIMATIONS
   List items animate in sequence
   ======================================== */
.stagger-animation > * {
    opacity: 0;
    transform: translateY(20px);
}

.stagger-animation.visible > *:nth-child(1) {
    animation: fadeInUp 0.6s ease forwards 0.1s;
}

.stagger-animation.visible > *:nth-child(2) {
    animation: fadeInUp 0.6s ease forwards 0.2s;
}

.stagger-animation.visible > *:nth-child(3) {
    animation: fadeInUp 0.6s ease forwards 0.3s;
}

.stagger-animation.visible > *:nth-child(4) {
    animation: fadeInUp 0.6s ease forwards 0.4s;
}

.stagger-animation.visible > *:nth-child(5) {
    animation: fadeInUp 0.6s ease forwards 0.5s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   TAILWIND INTEGRATION
   Custom classes that work with Tailwind
   ======================================== */

/* Override Tailwind colors with brand colors */
.bg-brand-navy { background-color: var(--brand-navy-500); }
.bg-brand-cyan { background-color: var(--brand-cyan-500); }
.text-brand-navy { color: var(--brand-navy-500); }
.text-brand-cyan { color: var(--brand-cyan-500); }
.border-brand-navy { border-color: var(--brand-navy-500); }
.border-brand-cyan { border-color: var(--brand-cyan-500); }

/* Shadow utilities */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-bold { box-shadow: var(--shadow-bold); }
.shadow-crisp { box-shadow: var(--shadow-crisp); }
.shadow-deep { box-shadow: var(--shadow-deep); }
.shadow-glow-cyan { box-shadow: var(--shadow-glow-cyan); }
.shadow-glow-navy { box-shadow: var(--shadow-glow-navy); }

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
    :root {
        --section-padding: 2rem;
        --space-3xl: 2rem;
        --space-4xl: 3rem;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */
.focus-visible:focus-visible {
    outline: 2px solid var(--brand-cyan-500);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .no-print {
        display: none !important;
    }
}