:root {
    /* Brand Palette (Primary - Navy) */
    --brand-dark: #17213C;
    --brand-mid: #2A365B;
    --brand-light: #46557E;
    --brand-pale: #EEF1F7;
    /* Brand Secondary Palette (Orange) */
    --brand-secondary-dark: #C76700;
    --brand-secondary-mid: #ED8003;
    --brand-secondary-light: #F6A84D;
    --brand-secondary-pale: #FFF3E3;
    /*Logo Colors*/
    --logo-primary: var(--brand-dark);
    /* UI Surface */
    --surface: #FFFFFF;
    --input-border: #C8DAE8;
    /* Text */
    --text-primary: var(--brand-dark);
    --text-secondary: var(--brand-secondary-mid);
    --text-muted: #7A96A8;
    --text-on-brand: #FFFFFF;
    /* Divider */
    --divider: #D9E8F2;
    /* Focus Ring */
    --focus-ring-color-button: rgba(23, 33, 60, 0.35);
    --focus-ring-color-form-control: rgba(237, 128, 3, 0.35);
    --focus-ring-size: 0.25rem;
    /* Button States */
    --btn-primary-bg: var(--brand-dark);
    --btn-primary-border: var(--brand-dark);
    --btn-primary-hover-bg: var(--brand-mid);
    --btn-primary-hover-border: var(--brand-mid);
    /* Input Focus */
    --input-focus-border: var(--brand-secondary-light);
    /* Fonts */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    /* Animation */
    --transition: 0.2s ease;
}

/* ================================
   Buttons
================================ */

.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border) !important;
    transition: all var(--transition);
    box-shadow: var(--shadow-btn);
}

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

.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color-button) !important;
    border-color: var(--brand-mid) !important;
}

.btn-outline-primary {
    color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border) !important;
}

.btn-outline-primary:hover {
    background-color: var(--btn-primary-hover-bg) !important;
    border-color: var(--btn-primary-hover-border) !important;
}

.text-primary {
    color: var(--text-primary) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}
/* ================================
   Inputs
================================ */
.form-control {
    border-color: var(--input-border) !important;
    transition: all var(--transition);
}

    .form-control:focus,
    .form-control:focus-visible {
        border-color: var(--input-focus-border) !important;
        box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color-form-control) !important;
        background-color: var(--surface) !important;
    }

/* ================================
   Optional: Remove ugly Bootstrap outline
================================ */
button:focus,
input:focus {
    outline: none !important;
}