/* --- CORE THEME: EMBER & STEEL --- */
:root {
    --bg-main: #1a1614;         /* Warm Charcoal Brown */
    --bg-surface: #26211e;      /* Smoky Bark */
    --text-main: #e0d7d5;       /* Soft Bone */
    --accent-warm: #e67e22;     /* Autumn Orange (Inviting) */
    --accent-strong: #c0392b;   /* Blood Ox Red (Authoritative) */
    --accent-gold: #f39c12;     /* Goldenrod */
    --support-teal: #66fcf1;    /* Safety Archive Teal */
}

body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

/* --- Navbar: Deep & Clean --- */
.navbar, .navbar-custom {
    background-color: #0b0c10 !important;
    padding: 1rem 0;
    border-bottom: 1px solid #323d4a !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* --- Hero: Dramatic & Serious --- */
.hero {
    background: linear-gradient(rgba(26, 22, 20, 0.85), rgba(26, 22, 20, 0.9)), 
                url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072') center/cover;
    color: white;
    padding: 120px 0;
    text-align: center;
    border-bottom: 2px solid var(--accent-strong);
}

.hero h1 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* --- Content Boxes: Warm & Strong --- */
/* Target components specifically to avoid layout freezes */
.card, 
.admin-card, 
.onboard-card, 
.modal-content, 
.support-card {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: none !important;
    border-left: 4px solid var(--accent-strong) !important; /* The 'Authority' Line */
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    transition: transform 0.3s ease;
}

.card:hover, .admin-card:hover {
    transform: translateY(-5px);
}

/* Safer override for bg-white utility - prevents UI deadlock */
.bg-white {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

/* --- Interactive Elements --- */
.btn-warning {
    background-color: var(--accent-warm) !important;
    border: none !important;
    color: white !important;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-warning:hover {
    background-color: var(--accent-gold) !important;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.4);
}

/* --- Emergency Flags --- */
.flag-emergency {
    background-color: var(--accent-strong);
    color: white;
    font-weight: bold;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}

/* --- Text Utility --- */
.text-muted, .text-secondary {
    color: #8a8f94 !important; 
}