:root {
    /* Brand Palette */
    --brand-dark: #E20613;
    --brand-mid: #F23A45;
    --brand-light: #F76B73;
    --brand-pale: #FDEBEC;
    /* Brand Secondary Palette */
    --brand-secondary-dark: #333333;
    --brand-secondary-mid: #666666;
    --brand-secondary-light: #F0F0F0;
    --brand-secondary-pale: #FAFAFA;
    /*Logo Colors*/
    --logo-primary: #178ec8;
    /* UI Surface */
    --surface: #FFFFFF;
    --input-border: #C8DAE8;
    /* Text */
    --text-primary: var(--brand-secondary-dark);
    --text-secondary: var(--brand-dark);
    --text-muted: #7A96A8;
    --text-on-brand: #FFFFFF;
    /* Divider */
    --divider: #D9E8F2;
    /* Focus Ring */
    --focus-ring-color: rgba(51, 51, 51, 0.35);
    --focus-ring-size: 0.25rem;
    /* Button States */
    --btn-primary-bg: var(--brand-secondary-dark);
    --btn-primary-border: var(--brand-secondary-dark);
    --btn-primary-hover-bg: var(--brand-secondary-mid);
    --btn-primary-hover-border: var(--brand-secondary-mid);
    /* Input Focus */
    --input-focus-border: var(--brand-secondary-dark);
    /* 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) !important;
        border-color: var(--btn-primary-border) !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) !important;
    background-color: var(--surface) !important;
}

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