@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --color-bg: #101010;
    --color-card: #181818;
    --color-border: #2a2a2a;
    --color-gold: #D4AF37;
    --color-text: #f3f5f7;
    --color-text-muted: #9ca3af;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 1.6;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Utilities */
.text-gold { color: var(--color-gold); }
.bg-gold { background-color: var(--color-gold); }
.border-gold { border-color: var(--color-gold); }

.glossy {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glow-hover:hover {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.5);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Custom Utilities for Local Tailwind */
:root {
    --color-gold: #D4AF37;
    --color-bg: #101010;
    --color-card: #181818;
    --color-border: #2a2a2a;
}

.text-gold { color: var(--color-gold); }
.bg-gold { background-color: var(--color-gold); }
.border-gold { border-color: var(--color-gold); }

/* Gradient Utilities */
.from-gold {
    --tw-gradient-from: var(--color-gold);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(212, 175, 55, 0));
}
.to-yellow-600 {
    --tw-gradient-to: #ca8a04;
}

.bg-dark { background-color: var(--color-bg); }
.bg-card { background-color: var(--color-card); }
.border-border { border-color: var(--color-border); }
.text-border { color: var(--color-border); }
.focus\:border-gold:focus { border-color: var(--color-gold); }
/* Fix for bg-black/50 if not supported */
.bg-black-50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-dark-90 { background-color: rgba(16, 16, 16, 0.9); }
.bg-black-30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-gold-10 { background-color: rgba(212, 175, 55, 0.1); }

/* Opacity Utilities for Local Tailwind */
.bg-dark-40 { background-color: rgba(16, 16, 16, 0.4); }
.bg-dark-80 { background-color: rgba(16, 16, 16, 0.8); }
.border-gold-50 { border-color: rgba(212, 175, 55, 0.5); }
.border-gold-30 { border-color: rgba(212, 175, 55, 0.3); }
.hover\:border-gold-30:hover { border-color: rgba(212, 175, 55, 0.3); }
.bg-green-500-20 { background-color: rgba(16, 185, 129, 0.2); }
.bg-yellow-500-20 { background-color: rgba(245, 158, 11, 0.2); }
.bg-white-5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white-10 { background-color: rgba(255, 255, 255, 0.1); }
.border-white-5 { border-color: rgba(255, 255, 255, 0.05); }
.border-white-10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white-20 { border-color: rgba(255, 255, 255, 0.2); }
.hover\:bg-white-10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:border-gold-50:hover { border-color: rgba(212, 175, 55, 0.5); }