:root {
    /* Primary Colors */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #e94560;
    --primary-color-rgb: 102, 126, 234;
    
    /* Header & Footer */
    --header-bg-color: #1a1a2e;
    --footer-bg-color: #1a1a2e;
    
    /* Text Colors */
    --text-color: #212529;
    --link-color: #667eea;
    --link-hover-color: #764ba2;
    
    /* Button Colors */
    --btn-primary-color: #667eea;
    --btn-secondary-color: #6c757d;
    
    /* Card Styles */
    --card-bg: #ffffff;
    --card-bg-color: #ffffff;
    --card-border-radius: 8px;
    --card-padding: 16px;
    
    /* Typography */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --heading-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --base-font-size: 16px;
    
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* =============================================
     * SECTION HEADING GRADIENTS (for Homepage & Other Pages)
     * These colors are derived from admin theme colors
     * ============================================= */
    
    /* Trending Section - Using accent color */
    --section-trending-gradient: linear-gradient(135deg, #e94560 0%, #ee5a5a 100%);
    
    /* Latest Section - Using primary gradient */
    --section-latest-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Albums Section - Green theme */
    --section-albums-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    
    /* Artists Section - Orange/Yellow theme */
    --section-artists-gradient: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
    
    /* Top Songs Section - Using secondary color */
    --section-top-gradient: linear-gradient(135deg, #764ba2 0%, #f5576c 100%);
    
    /* Featured Section - Blue/Cyan theme */
    --section-featured-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    
    /* =============================================
     * LAYOUT SETTINGS (from Admin)
     * ============================================= */
    
    /* Grid Columns - Songs */
    --grid-songs-mobile: 1;
    --grid-songs-tablet: 2;
    --grid-songs-desktop: 2;
    
    /* Grid Columns - Albums */
    --grid-albums-mobile: 2;
    --grid-albums-tablet: 3;
    --grid-albums-desktop: 4;
    
    /* Grid Columns - Artists */
    --grid-artists-mobile: 3;
    --grid-artists-tablet: 4;
    --grid-artists-desktop: 6;
    
    /* Grid Gap */
    --grid-gap: 16px;
    
    /* Sidebar */
    --sidebar-width: 320px;
    
    /* Spacing */
    --section-spacing: 40px;
    
    /* Container */
    --container-width: 1140px;
    
    /* =============================================
     * CARD STYLE SETTINGS (from Admin)
     * ============================================= */
    
    /* Thumbnail Sizes */
    --thumb-size: 70px;
    
    /* Avatar Sizes */
    --avatar-size: 120px;
}

/* Apply Custom Styles */
body {
    font-family: var(--font-family);
    font-size: var(--base-font-size);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

.bg-primary {
    background: var(--header-bg-color) !important;
}

.navbar.bg-primary {
    background: var(--header-bg-color) !important;
}

footer.bg-primary {
    background: var(--footer-bg-color) !important;
}

.btn-primary {
    background-color: var(--btn-primary-color);
    border-color: var(--btn-primary-color);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-danger {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.card {
    background-color: var(--card-bg-color);
    border-radius: var(--card-border-radius);
}

.text-primary {
    color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* Gradient backgrounds */
.bg-gradient-primary {
    background: var(--primary-gradient);
}

/* =============================================
 * RESPONSIVE GRID OVERRIDES
 * ============================================= */

.songs-grid {
    grid-template-columns: repeat(var(--grid-songs-mobile), 1fr);
    gap: var(--grid-gap);
}

@media (min-width: 768px) {
    .songs-grid {
        grid-template-columns: repeat(var(--grid-songs-tablet), 1fr);
    }
}

@media (min-width: 992px) {
    .songs-grid {
        grid-template-columns: repeat(var(--grid-songs-desktop), 1fr);
    }
}

.albums-grid {
    grid-template-columns: repeat(var(--grid-albums-mobile), 1fr);
    gap: var(--grid-gap);
}

@media (min-width: 768px) {
    .albums-grid {
        grid-template-columns: repeat(var(--grid-albums-tablet), 1fr);
    }
}

@media (min-width: 992px) {
    .albums-grid {
        grid-template-columns: repeat(var(--grid-albums-desktop), 1fr);
    }
}

.artists-grid {
    grid-template-columns: repeat(var(--grid-artists-mobile), 1fr);
    gap: var(--grid-gap);
}

@media (min-width: 768px) {
    .artists-grid {
        grid-template-columns: repeat(var(--grid-artists-tablet), 1fr);
    }
}

@media (min-width: 992px) {
    .artists-grid {
        grid-template-columns: repeat(var(--grid-artists-desktop), 1fr);
    }
}

/* Sidebar Width */
.sidebar-content {
    width: var(--sidebar-width);
}

@media (max-width: 991px) {
    .sidebar-content {
        width: 100%;
    }
}

/* Section Spacing */
.section {
    margin-bottom: var(--section-spacing);
}

/* Container Width */
.container-modern {
    max-width: var(--container-width);
}

/* Song Card Thumbnail */
.song-card .song-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
}

/* Artist Avatar */
.artist-card .artist-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
}

/* Primary color shadow */
.shadow-primary {
    box-shadow: 0 4px 14px 0 rgba(var(--primary-color-rgb), 0.25);
}

/* Play button with primary color */
.btn-play,
.album-play-btn {
    background: var(--primary-color);
}

.btn-play:hover,
.album-play-btn:hover {
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4);
}