:root {
    --primary-color: #0B2C8F;
    --secondary-color: #081830;
    --accent-color: #F2186A;
    --accent-red-color: #FF4B45;
    --accent-orange-color: #FF8C1A;
    --light-blue-color: #2D52C7;
    --brand-gradient: linear-gradient(135deg, #0B2C8F 0%, #F2186A 55%, #FF4B45 80%, #FF8C1A 100%);
    --background-color: #F8FAFC;
    --surface-color: #FFFFFF;
    --surface-alt-color: #F8FAFC;
    --surface-strong-color: rgba(255, 255, 255, 0.92);
    --text-color: #081830;
    --muted-color: #6B7280;
    --border-color: #E5EAF2;
    --success-color: #2E7D32;
    --warning-color: #FF8C1A;
    --danger-color: #FF4B45;
    --surface-rgb: 255, 255, 255;
    --surface-alt-rgb: 248, 250, 252;
    --border-rgb: 229, 234, 242;
    --text-rgb: 8, 24, 48;
    --muted-rgb: 107, 114, 128;
    --success-rgb: 46, 125, 50;
    --warning-rgb: 255, 140, 26;
    --danger-rgb: 255, 75, 69;
    --primary-dark-color: #081830;
    --secondary-dark-color: #081830;
    --hero-overlay-color: rgba(8, 24, 48, 0.86);
    /* UI: Softer shadow color for global shadow variable */
    --shadow-color: rgba(8, 24, 48, 0.08);
    --primary-rgb: 11, 44, 143;
    --accent-rgb: 242, 24, 106;
    --accent-red-rgb: 255, 75, 69;
    --accent-orange-rgb: 255, 140, 26;
    --light-blue-rgb: 45, 82, 199;
    --secondary-rgb: 8, 24, 48;
    --primary-dark-rgb: 8, 24, 48;
    --secondary-dark-rgb: 8, 24, 48;
    --primary: var(--primary-color);
    --primary-dark: var(--primary-dark-color);
    --secondary: var(--secondary-color);
    --secondary-dark: var(--secondary-dark-color);
    --accent: var(--accent-color);
    --accent2: var(--accent-color);
    --navy: var(--secondary-color);
    --ink: var(--text-color);
    --muted: var(--muted-color);
    --text: var(--text-color);
    --text-light: var(--muted-color);
    --background: var(--background-color);
    --surface: var(--surface-color);
    --surface-alt: var(--surface-alt-color);
    --soft: var(--surface-alt-color);
    --border: var(--border-color);
    --success: var(--success-color);
    --warning: var(--warning-color);
    --danger: var(--danger-color);
    --shadow: 0 1px 3px rgba(8, 24, 48, 0.03), 0 6px 16px rgba(8, 24, 48, 0.06);
}

::selection {
    color: var(--surface-color);
    background: var(--primary-color);
}

body,
.body,
.iframe-body {
    color: var(--text-color);
    background: var(--background-color);
}

.btn-primary,
.btn-outline-primary,
.btn-success,
.btn-danger {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
    background: var(--brand-gradient);
    border-color: var(--primary-color);
    color: var(--surface-color);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--surface-color);
}

.card,
.dashboard-card,
.metric-card,
.success-card,
.receipt-sheet,
.empty-state,
.info-tile,
.feature-card,
.service-card,
.contact-form-card,
.contact-info-card,
.location-card,
.workflow-card,
.portal-entry-card,
.support-topic-card,
.contact-policy-card {
    background: var(--surface-color);
    border-color: var(--border-color);
    box-shadow: var(--shadow);
}

.form-control,
.form-select,
.form-group .form-control,
.form-group .form-select {
    border-color: var(--border-color);
    color: var(--text-color);
    background: var(--surface-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.18);
}

/* UI: Global focus-visible styles for keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* UI: Smooth scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-alt-color);
}

::-webkit-scrollbar-thumb {
    background: #c4c9d4;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive footer adjustments for mobile */
@media (max-width: 768px) {
    .site-footer .iframe-container.footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .site-footer .footer-company,
    .site-footer .footer-section,
    .site-footer .footer-contact {
        padding: 0.5rem 0;
    }

    .site-footer .footer-brand {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 1.05rem;
    }

    .site-footer .footer-tagline {
        font-size: 0.95rem;
        margin: 0.25rem 0 0.5rem;
    }

    .site-footer .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        align-items: center;
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }

    .site-footer .footer-section h2 {
        font-size: 1rem;
    }

    .site-footer address {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .site-footer ul {
        padding-left: 0; 
        list-style: none;
        margin: 0;
    }
}