:root {
    /* Brand Colors - Professional Blue (att.com inspired) */
    --color-primary: #00A8E0;
    --color-primary-hover: #007EB4;
    --color-primary-contrast: #bf360c;
    /* High contrast burgundy for text/icons (AA compliant) */

    /* Navigation - Bold & Clean */
    --nav-link-color: #333333;
    --nav-link-hover: #00A8E0;
    --nav-link-weight: 700;
    --nav-font-size: 1rem;

    /* Primary Button Gradient */
    --btn-primary-bg-start: #00A8E0;
    --btn-primary-bg-end: #007EB4;
    --btn-primary-text: #ffffff;
    --btn-primary-border: #007EB4;

    /* Hero Section Gradient */
    --hero-bg-gradient: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    --color-card-feature-bg: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);

    /* Status Colors */
    --color-success: #008a00;
    --color-success-contrast: #1b5e20;
    --color-warning: #ffaa00;
    --color-warning-contrast: #2a80ef;
    --color-danger: #ef4444;
    --color-danger-contrast: #991b1b;

    /* Surface Colors */
    --color-bg-body: #f7f9fa;
    --color-bg-card: #ffffff;
    --color-border: #cbd5e1;

    /* Text Colors */
    --color-text: #333333;
    --color-text-bold: #000000;
    --color-text-light: #666666;

    /* Decorative */
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.22);
    --radius-card: 12px;
    --radius-btn: 6px;

    /* Padding */
    --card-padding: 2.5rem;
    --card-padding-mobile: 0.85rem;
}

/* Layout Overrides to Fix Logo/Menu */
.nav-logo,
#header .nav-logo {
    max-height: 64px !important;
    width: auto !important;
}

@media (max-width: 768px) {

    .nav-logo,
    #header .nav-logo {
        max-height: 30px !important;
    }
}

.desktop-nav,
#header .desktop-nav {
    margin-left: auto !important;
    display: flex !important;
}

@media (max-width: 768px) {

    .desktop-nav,
    #header .desktop-nav {
        display: none !important;
    }
}

/* Fix Hero Overlap */
.main-content,
#main.main-content {
    padding-top: 90px !important;
}

@media (max-width: 768px) {

    .main-content,
    #main.main-content {
        padding-top: 55px !important;
    }
}

/* Constrain Header Width */
.header-inner,
#header .header-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
}