:root {
    /* ===== Base brand colors (as requested) ===== */
    --primary: #3498db;
    --primary-dark: #2980b9;
    --primary-soft: #e3f2fd;
    --accent-color-1: #1977cc;
    --accent-color-2: #001a50;
    /* Aliases */
    --primary-color: #3498db;
    --primary-darker: #2980b9;
    --primary-red: #1977cc;
    --dark-red: #2980b9;
    /* Secondary / accent */
    --secondary-color: #64b5f6;
    --accent-color: #0d47a1;
    --accent-light: #bbdefb;
    --accent-lighter: #e3f2fd;
    /* Gradients */
    --primary-gradient: linear-gradient( 135deg, #64b5f6 0%, #1977cc 50%, #2980b9 100% );
    --secondary-gradient: linear-gradient( 135deg, #90caf9 0%, #64b5f6 100% );
    --light-red-gradient: linear-gradient( 135deg, #e3f2fd 0%, #bbdefb 100% );
    /* ===== Text ===== */
    --text-main: #212529;
    --text-muted: #6c757d;
    --text-dark: #212529;
    --text-medium: #6c757d;
    --text-light: #f8f9fa;
    /* ===== Grays & layout ===== */
    --dark-gray: #585858;
    --medium-gray: #e7e9eb;
    --light-gray: #f5f5f5;
    /* ===== Borders ===== */
    --border-color: #dee2e6;
    --card-border: #dee2e6;
    --tag-bg: #e7e9eb;
    /* ===== Backgrounds ===== */
    --page-bg: #f6f8fb;
    --card-bg: #ffffff;
    --surface-bg: #f8f9fa;
    /* ===== Semantic surfaces (auto-derived) ===== */
    --surface-soft: color-mix(in srgb, var(--primary) 6%, white);
    --surface-soft-strong: color-mix(in srgb, var(--primary) 12%, white);
    --surface-selected: color-mix(in srgb, var(--primary) 18%, white);
    /* ===== Borders semantic ===== */
    --border-soft: color-mix(in srgb, var(--primary) 25%, transparent);
    --border-strong: color-mix(in srgb, var(--primary) 45%, transparent);
    /* ===== Shadows ===== */
    --shadow-color: 0, 0, 0;
    --shadow-xs: 0 2px 6px rgba(var(--shadow-color), .06);
    --shadow-sm: 0 4px 12px rgba(var(--shadow-color), .08);
    --shadow-md: 0 8px 20px rgba(var(--shadow-color), .12);
    --shadow-lg: 0 20px 40px rgba(var(--shadow-color), .18);
    /* ===== States ===== */
    --state-hover-bg: color-mix(in srgb, var(--primary) 8%, white);
    --state-active-bg: color-mix(in srgb, var(--primary) 15%, white);
    --state-focus-ring: color-mix(in srgb, var(--primary) 40%, transparent);
    /* ===== Buttons ===== */
    --btn-primary-bg: var(--primary);
    --btn-primary-bg-hover: var(--primary-dark);
    --btn-primary-text: #fff;
    --btn-outline-border: var(--primary);
    --btn-outline-text: var(--primary-dark);
    --btn-outline-bg-hover: var(--primary);
    --btn-outline-text-hover: #fff;
    /* ===== Compatibility vars===== */
    --primary-color-dark: var(--primary-dark);
    --primary-color-light: var(--primary);
    --highlight-color: var(--primary);
    --text-emphasis-color: var(--text-main);
    --text-secondary-color: var(--text-muted);
    --border-color-light: var(--border-soft);
    --background-lighter: var(--surface-soft);
    /* ===== Misc ===== */
    --input-bg: rgba(255, 255, 255, 0.9);
    --topbar-height: 80px;
    /* Status colors */
    --success: #2e7d32;
    --success-bg: #e8f5e9;
    --success-text: #1b5e20;
    --warning: #ed6c02;
    --warning-bg: #fff3e0;
    --warning-text: #e65100;
    --info: #0288d1;
    --info-bg: #e1f5fe;
    --info-text: #01579b;
    --neutral-bg: #eceff1;
    --neutral-text: #37474f;
    /* ===== Legacy compatibility (from red theme) ===== */
    /* Reds equivalents → Blue tones */
    --medium-red: var(--secondary-color);
    --light-red: #64b5f6;
    --light-red-bg: var(--primary-soft);
    --pale-red: var(--primary-soft);
    /* Legacy shadows */
    --shadow-light: rgba(52, 152, 219, 0.1);
    --shadow-medium: rgba(52, 152, 219, 0.15);
    /* Legacy aliases (ensure full match with red theme) */
    --primary-color: var(--primary);
    --primary-darker: var(--primary-dark);
    --primary-red: var(--primary);
    --dark-red: var(--primary-dark);
}

.footer-link::before {    
    color: white;
}

/* Buttons */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #fff !important;
}

.btn-outline-primary {
    border-color: var(--primary-red);
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s;
}

.btn-outline-primary {
    color: var(--primary-red);
    border-color: var(--primary-red);
}

.btn-outline-primary:hover {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: white;
}

.btn-outline-secondary, .btn-outline-danger {
    padding: 12px 30px !important;
}

.hero-side {
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(235, 245, 255, 0.9) 100% );
}

.form-side {
    background: linear-gradient( 135deg, #ffffff 0%, #eef5ff 100% );
}