/* ============================================
   CMS Website Sekolah - Theme System
   Dimuat SETELAH style.css agar override :root
   Selector html[data-theme] > :root (lebih spesifik)
   ============================================ */

/* ========== THEME 1: Biru Klasik (Default) ========== */
html[data-theme="biru-klasik"] {
    --primary:          #1e40af;
    --primary-rgb:      30, 64, 175;
    --primary-light:    #3b82f6;
    --primary-dark:     #1e3a8a;
    --secondary:        #0891b2;
    --accent:           #f59e0b;
    --accent-light:     #fbbf24;
    --gradient-primary: linear-gradient(135deg, #1e40af 0%, #0891b2 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --gradient-dark:    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(15,23,42,0.82) 0%, rgba(30,64,175,0.60) 100%);
}

/* ========== THEME 2: Hijau Emerald ========== */
html[data-theme="hijau-emerald"] {
    --primary:          #065f46;
    --primary-rgb:      6, 95, 70;
    --primary-light:    #10b981;
    --primary-dark:     #064e3b;
    --secondary:        #059669;
    --accent:           #f59e0b;
    --accent-light:     #fbbf24;
    --gradient-primary: linear-gradient(135deg, #065f46 0%, #10b981 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --gradient-dark:    linear-gradient(135deg, #064e3b 0%, #0f172a 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(6,78,59,0.85) 0%, rgba(6,95,70,0.65) 100%);
}

/* ========== THEME 3: Merah Maroon ========== */
html[data-theme="merah-maroon"] {
    --primary:          #991b1b;
    --primary-rgb:      153, 27, 27;
    --primary-light:    #ef4444;
    --primary-dark:     #7f1d1d;
    --secondary:        #dc2626;
    --accent:           #fbbf24;
    --accent-light:     #fcd34d;
    --gradient-primary: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    --gradient-accent:  linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-dark:    linear-gradient(135deg, #1c0505 0%, #1e293b 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(69,10,10,0.85) 0%, rgba(153,27,27,0.65) 100%);
}

/* ========== THEME 4: Ungu Royal ========== */
html[data-theme="ungu-royal"] {
    --primary:          #6b21a8;
    --primary-rgb:      107, 33, 168;
    --primary-light:    #a855f7;
    --primary-dark:     #581c87;
    --secondary:        #7c3aed;
    --accent:           #f59e0b;
    --accent-light:     #fbbf24;
    --gradient-primary: linear-gradient(135deg, #6b21a8 0%, #7c3aed 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    --gradient-dark:    linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(46,16,101,0.85) 0%, rgba(107,33,168,0.65) 100%);
}

/* ========== THEME 5: Orange Energik ========== */
html[data-theme="orange-energik"] {
    --primary:          #c2410c;
    --primary-rgb:      194, 65, 12;
    --primary-light:    #f97316;
    --primary-dark:     #9a3412;
    --secondary:        #ea580c;
    --accent:           #fbbf24;
    --accent-light:     #fcd34d;
    --gradient-primary: linear-gradient(135deg, #c2410c 0%, #f97316 100%);
    --gradient-accent:  linear-gradient(135deg, #fbbf24 0%, #facc15 100%);
    --gradient-dark:    linear-gradient(135deg, #1c0a05 0%, #1e293b 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(67,20,7,0.85) 0%, rgba(194,65,12,0.65) 100%);
}

/* ========== THEME 6: Hitam Elegan ========== */
html[data-theme="hitam-elegan"] {
    --primary:          #1f2937;
    --primary-rgb:      31, 41, 55;
    --primary-light:    #4b5563;
    --primary-dark:     #111827;
    --secondary:        #374151;
    --accent:           #f59e0b;
    --accent-light:     #fbbf24;
    --gradient-primary: linear-gradient(135deg, #111827 0%, #374151 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --gradient-dark:    linear-gradient(135deg, #030712 0%, #111827 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(3,7,18,0.85) 0%, rgba(31,41,55,0.65) 100%);
}

/* ========== THEME 7: Tosca Modern ========== */
html[data-theme="tosca-modern"] {
    --primary:          #0e7490;
    --primary-rgb:      14, 116, 144;
    --primary-light:    #06b6d4;
    --primary-dark:     #155e75;
    --secondary:        #0891b2;
    --accent:           #f59e0b;
    --accent-light:     #fbbf24;
    --gradient-primary: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #10b981 100%);
    --gradient-dark:    linear-gradient(135deg, #042f2e 0%, #0f172a 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(8,51,68,0.85) 0%, rgba(14,116,144,0.65) 100%);
}

/* ========== THEME 8: Coklat Hangat ========== */
html[data-theme="coklat-hangat"] {
    --primary:          #92400e;
    --primary-rgb:      146, 64, 14;
    --primary-light:    #d97706;
    --primary-dark:     #78350f;
    --secondary:        #b45309;
    --accent:           #10b981;
    --accent-light:     #34d399;
    --gradient-primary: linear-gradient(135deg, #92400e 0%, #d97706 100%);
    --gradient-accent:  linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-dark:    linear-gradient(135deg, #1c1008 0%, #1e293b 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(69,26,3,0.85) 0%, rgba(146,64,14,0.65) 100%);
}

/* ========== THEME 9: Pink Cerah ========== */
html[data-theme="pink-cerah"] {
    --primary:          #9d174d;
    --primary-rgb:      157, 23, 77;
    --primary-light:    #ec4899;
    --primary-dark:     #831843;
    --secondary:        #db2777;
    --accent:           #f59e0b;
    --accent-light:     #fbbf24;
    --gradient-primary: linear-gradient(135deg, #9d174d 0%, #ec4899 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --gradient-dark:    linear-gradient(135deg, #1a0510 0%, #1e293b 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(80,7,36,0.85) 0%, rgba(157,23,77,0.65) 100%);
}

/* ========== THEME 10: Indigo Dalam ========== */
html[data-theme="indigo-dalam"] {
    --primary:          #312e81;
    --primary-rgb:      49, 46, 129;
    --primary-light:    #6366f1;
    --primary-dark:     #1e1b4b;
    --secondary:        #4338ca;
    --accent:           #f59e0b;
    --accent-light:     #fbbf24;
    --gradient-primary: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    --gradient-dark:    linear-gradient(135deg, #0d0c1d 0%, #1e1b4b 100%);
    --hero-overlay-bg:  linear-gradient(135deg, rgba(30,27,75,0.85) 0%, rgba(49,46,129,0.65) 100%);
}

/* ============================================
   Elemen yang menggunakan gradient langsung
   (perlu di-override secara eksplisit)
   ============================================ */
html[data-theme] .stats-section {
    background: var(--gradient-primary) !important;
}
html[data-theme] .page-header {
    background: var(--gradient-primary) !important;
}
html[data-theme] .btn-primary {
    background: var(--gradient-primary) !important;
}
html[data-theme] .navbar-brand {
    color: var(--primary) !important;
}
html[data-theme] .nav-menu a:hover,
html[data-theme] .nav-menu a.active {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.06);
}
html[data-theme] .footer {
    background: var(--gradient-dark) !important;
}
html[data-theme] .section-header h2::after {
    background: var(--gradient-primary) !important;
}
html[data-theme] .card-badge {
    background: var(--gradient-primary) !important;
}
html[data-theme] .card-footer-link {
    color: var(--primary) !important;
}
html[data-theme] #back-to-top {
    background: var(--gradient-primary) !important;
}
html[data-theme] .hero-overlay {
    background: none !important;
    display: none !important;
}

/* ============================================
   TINTING BACKGROUNDS (Berita, Jurusan, Galeri)
   ============================================ */
html[data-theme] body {
    /* Memberikan tint warna sangat tipis (2%) ke seluruh body */
    background: rgba(var(--primary-rgb), 0.02) !important;
}
html[data-theme] .section {
    /* Bagian section (seperti Program Keahlian) akan transparan mewarisi body */
    background: transparent !important;
}
html[data-theme] .section-alt {
    /* Bagian section-alt (seperti Berita & Galeri) diberi tint lebih gelap (6%) */
    background: rgba(var(--primary-rgb), 0.06) !important;
}