/* Brand Colors CSS Variables */
:root {
    --brand-ghost-white: #F8F9FA;
    --brand-orange: #E05E0F;
    --brand-orange-hover: #C54E0C;
    --brand-teal: #4D9A88;
    --brand-teal-hover: #3A7A6B;
    --brand-deep-blue: #172B42;
    --brand-deep-blue-light: rgba(23, 43, 66, 0.9);
}

/* Override default colors */
body {
    background-color: var(--brand-ghost-white) !important;
    color: var(--brand-deep-blue) !important;
}

/* Primary buttons */
.btn-primary,
.bg-primary {
    background-color: var(--brand-orange) !important;
}

.btn-primary:hover,
.bg-primary:hover {
    background-color: var(--brand-orange-hover) !important;
}

/* Secondary buttons */
.btn-secondary,
.bg-secondary {
    background-color: var(--brand-teal) !important;
}

.btn-secondary:hover,
.bg-secondary:hover {
    background-color: var(--brand-teal-hover) !important;
}

/* Text colors */
.text-primary {
    color: var(--brand-orange) !important;
}

.text-secondary {
    color: var(--brand-teal) !important;
}

.text-dark {
    color: var(--brand-deep-blue) !important;
}

/* Gradients */
.brand-gradient {
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-teal) 100%) !important;
}

/* Cards and panels */
.card,
.panel,
.glass-morphism {
    background-color: var(--brand-ghost-white) !important;
    color: var(--brand-deep-blue) !important;
}

/* Links */
a {
    color: var(--brand-orange);
}

a:hover {
    color: var(--brand-orange-hover);
}

/* Forms */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 3px rgba(224, 94, 15, 0.1) !important;
}

/* Badges and pills */
.badge-primary {
    background-color: var(--brand-orange) !important;
    color: white !important;
}

.badge-secondary {
    background-color: var(--brand-teal) !important;
    color: white !important;
}

/* Navigation */
.nav-link.active,
.tab-btn.active {
    color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar-thumb {
    background-color: var(--brand-teal);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-teal-hover);
}