:root {
    /* Base Colors */
    --primary-bg: #0a0a0a;
    --secondary-bg: #1a1a1a;
    --accent-color: #ffa500;
    --accent-secondary: #ff6b35;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    /* Background Variations */
    --card-bg: rgba(26, 26, 26, 0.8);
    --bg-white-03: rgba(255, 255, 255, 0.03); /* Very subtle white tint */
    --bg-white-05: rgba(255, 255, 255, 0.05); /* Subtle white tint */
    --bg-white-08: rgba(255, 255, 255, 0.08); /* Light white tint */
    /* Border Variations */
    --border-color: rgba(255, 165, 0, 0.2);
    /* Accent Color Variations */
    --accent-hover: rgba(255, 165, 0, 0.1); /* Light orange tint for hover */
    --accent-strong: rgba(255, 165, 0, 0.9); /* Strong orange for indicators */
    /* Text Color Variations */
    --text-muted: rgba(255, 255, 255, 0.3); /* Very light/muted white text */
    /* Gradients */
    --gradient: linear-gradient(135deg, #ffa500 0%, #ff6b35 100%);
    --gradient-hero: linear-gradient(135deg, #fff 0%, var(--accent-color) 100%);
    --gradient-shimmer: linear-gradient(90deg, var(--bg-white-03) 25%, var(--bg-white-08) 50%, var(--bg-white-03) 75%);
}

body {
    background: var(--primary-bg);
    color: var(--text-primary);
}

.hero-title {
    background: var(--gradient-hero);
}

.hero-subtitle {
    color: var(--text-secondary);
}

/* Navigation Tabs */
.tab-button {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

    .tab-button::before {
        background: var(--gradient);
    }

    .tab-button:hover {
        border-color: var(--accent-color);
    }

    .tab-button.active {
        border-color: var(--accent-color);
        background: var(--gradient);
    }

/* Video Grid */
.video-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Social Media Section */
.social-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Custom Facebook Widget */
.fb-profile-pic {
    border-color: var(--accent-color);
}

.fb-info h3 {
    color: var(--text-primary);
}

.fb-info p {
    color: var(--text-secondary);
}

.fb-visit-button {
    background: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

    .fb-visit-button:hover {
        background: var(--accent-color);
        color: var(--primary-bg);
    }

/* Custom Instagram Widget */
.ig-info h3 {
    color: var(--text-primary);
}

.ig-info p {
    color: var(--text-secondary);
}

.ig-visit-button {
    background: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

    .ig-visit-button:hover {
        background: var(--accent-color);
        color: var(--primary-bg);
    }

/* Loading placeholder */
.social-loading {
    color: var(--text-secondary);
}

    .social-loading .spinner {
        border-color: var(--border-color);
        border-top-color: var(--accent-color);
    }

.skeleton {
    background: var(--gradient-shimmer);
}

/* Shows Section */
.shows-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Scroll indicators */
.scroll-indicator {
    background: var(--accent-strong);
    color: var(--primary-bg);
}

.shows-table thead th {
    color: var(--accent-color);
    border-bottom-color: var(--border-color);
}

.shows-table tbody tr {
    background: var(--bg-white-03);
}

    .shows-table tbody tr:hover {
        background: var(--accent-hover);
    }

.shows-table td {
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

.shows-table tbody tr td:first-child {
    border-left-color: var(--border-color);
}

.shows-table tbody tr td:last-child {
    border-right-color: var(--border-color);
}

.venue-name {
    color: var(--text-primary);
}

.lineup {
    color: var(--text-secondary);
}

/* Booking Section */
.booking-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

    .booking-section h3 {
        background: var(--gradient);
    }

.booking-link {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

    .booking-link:hover {
        background: var(--accent-color);
        color: var(--primary-bg);
    }

/* Client Logos */
.clients-section {
    background: transparent;
}

    .clients-section h4 {
        color: var(--text-muted);
    }

.logo-item {
    background: var(--bg-white-05);
}

    .logo-item:hover {
        background: var(--bg-white-08);
    }

/* Loading Animation */
.loading {
    color: var(--text-secondary);
}

.spinner {
    border-color: var(--border-color);
    border-top-color: var(--accent-color);
}