:root {
    --hipapi-black: #0B0A0A;
    --hipapi-gold: #DFC585;
    --hipapi-maroon: #6B1F2A;
    --hipapi-white: #FFFFFF;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: var(--hipapi-black);
}

.bg-hipapi-black { background-color: var(--hipapi-black); color: var(--hipapi-white); }
.bg-hipapi-gold { background-color: var(--hipapi-gold); color: var(--hipapi-black); }
.bg-hipapi-maroon { background-color: var(--hipapi-maroon); color: var(--hipapi-white); }

.text-hipapi-gold { color: var(--hipapi-gold); }
.text-hipapi-maroon { color: var(--hipapi-maroon); }

.btn-hipapi-gold {
    background-color: var(--hipapi-gold);
    color: var(--hipapi-black);
    border: none;
}
.btn-hipapi-gold:hover {
    background-color: #cbb170;
    color: var(--hipapi-black);
}

.btn-hipapi-maroon {
    background-color: var(--hipapi-maroon);
    color: var(--hipapi-white);
    border: none;
}
.btn-hipapi-maroon:hover {
    background-color: #551820;
    color: var(--hipapi-white);
}

.navbar-hipapi {
    background-color: var(--hipapi-black);
    border-bottom: 3px solid var(--hipapi-gold);
}

.navbar-brand {
    font-weight: bold;
    color: var(--hipapi-gold) !important;
}

.nav-link {
    color: var(--hipapi-white) !important;
}
.nav-link:hover {
    color: var(--hipapi-gold) !important;
}

.card-officer {
    border: 1px solid var(--hipapi-gold);
}

.badge-officer-dpp {
    background-color: var(--hipapi-maroon);
    color: var(--hipapi-white);
}
.badge-officer-dpw {
    background-color: var(--hipapi-gold);
    color: var(--hipapi-black);
}

footer {
    background-color: var(--hipapi-black);
    color: var(--hipapi-white);
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 5px solid var(--hipapi-maroon);
}