/* Luxury UAE/GCC Bullion Trading Theme Styles */

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

:root {
    --bg-obsidian: #0B0F17;
    --card-slate: #151C28;
    --card-border: #232E42;
    --text-color: #F3F4F6;
    --text-muted: #9CA3AF;
    --gold-primary: #D4AF37;
    --gold-accent: #F3C649;
    --gold-light: #FDF4DC;
    --emerald-up: #10B981;
    --crimson-down: #EF4444;
    --glass-bg: rgba(21, 28, 40, 0.75);
}

/* Light Mode variable overrides */
:root:not(.dark) {
    --bg-obsidian: #F3F4F6;
    --card-slate: #FFFFFF;
    --card-border: #E5E7EB;
    --text-color: #111827;
    --text-muted: #4B5563;
    --glass-bg: rgba(255, 255, 255, 0.85);
}

body {
    background-color: var(--bg-obsidian);
    color: var(--text-color);
    font-family: 'Outfit', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Force Tabular Numerals on all Price Elements to prevent layout shifts */
.tabular-nums, .price-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.02em;
}

/* Force Light Mode text accessibility overrides for hardcoded Tailwind classes */
:root:not(.dark) .text-gray-100 { color: #111827 !important; }
:root:not(.dark) .text-gray-200 { color: #1F2937 !important; }
:root:not(.dark) .text-gray-300 { color: #374151 !important; }
:root:not(.dark) .text-gray-400 { color: #4B5563 !important; }
:root:not(.dark) .text-gray-500 { color: #6B7280 !important; }
:root:not(.dark) .text-white { color: #000000 !important; }
:root:not(.dark) h3 { color: #111827 !important; }

/* Glassmorphism Cards */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.glass-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.15);
    transform: translateY(-2px);
}

/* Metallic Gold Gradient Utility */
.text-gold-gradient {
    background: linear-gradient(135deg, #F3C649 0%, #D4AF37 50%, #AA7C11 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
    background: linear-gradient(135deg, #F3C649 0%, #D4AF37 100%);
}

.border-gold-glow {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

/* Price Flash Animations */
@keyframes flashGreen {
    0% {
        background-color: rgba(16, 185, 129, 0.35);
        color: #10B981;
        box-shadow: inset 0 0 15px rgba(16, 185, 129, 0.5);
    }
    100% {
        background-color: transparent;
    }
}

@keyframes flashRed {
    0% {
        background-color: rgba(239, 68, 68, 0.35);
        color: #EF4444;
        box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.5);
    }
    100% {
        background-color: transparent;
    }
}

.flash-up {
    animation: flashGreen 0.8s ease-out;
}

.flash-down {
    animation: flashRed 0.8s ease-out;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0B0F17;
}
::-webkit-scrollbar-thumb {
    background: #232E42;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4AF37;
}