/* Custom Variables & Global Styles */
:root {
    --gold-primary: #D4AF37;
    --gold-gradient: linear-gradient(to right, #bf953f, #fcf6ba, #b38728);
}

body { font-family: 'Kantumruy Pro', sans-serif; }

/* Dark Mode Colors */
body.dark { background-color: #0f172a; color: #f8fafc; }
body.dark .glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
body.dark .search-bar { background: rgba(255, 255, 255, 0.05); color: white; border: 1px solid rgba(255, 255, 255, 0.1); }

/* Light Mode Colors */
body.light { background-color: #f8fafc; color: #1e293b; }
body.light .glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.05); }
body.light .search-bar { background: white; color: #1e293b; border: 1px solid #e2e8f0; }

/* Reusable UI Components */
.gold-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-primary { background-color: var(--gold-primary); color: black; transition: all 0.3s; }
.btn-primary:hover { opacity: 0.9; transform: scale(1.05); }

.glass-card {
    transition: all 0.3s ease;
    border-bottom: 4px solid var(--gold-primary);
}

body.dark .glass-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); }
body.light .glass-card { background: white; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

.glass-card:hover { transform: translateY(-8px); }