/* McAllen Housing Commission Brand Colors */
:root {
    /* Primary Brand Colors */
    --mchc-blue: #085ED8;      /* Primary blue */
    --mchc-gold: #F0AD05;      /* Gold/Yellow accent */
    --mchc-green: #0A9539;     /* Green accent */
    --mchc-red: #E90F21;       /* Red accent */
    --mchc-navy: #1E344D;      /* Dark navy for text */
    
    /* Color Variations */
    --mchc-blue-light: #3B82F6;    /* Lighter blue for hover states */
    --mchc-blue-dark: #1E40AF;     /* Darker blue for active states */
    --mchc-gold-light: #FCD34D;    /* Lighter gold */
    --mchc-gold-dark: #D97706;     /* Darker gold */
    --mchc-green-light: #10B981;   /* Lighter green */
    --mchc-green-dark: #059669;    /* Darker green */
    --mchc-red-light: #EF4444;     /* Lighter red */
    --mchc-red-dark: #DC2626;      /* Darker red */
    
    /* Background Colors */
    --mchc-bg-primary: #F8FAFC;    /* Light background */
    --mchc-bg-secondary: #F1F5F9;  /* Secondary background */
    --mchc-bg-dark: #1E293B;       /* Dark background */
    
    /* Text Colors */
    --mchc-text-primary: #1E344D;  /* Primary text color */
    --mchc-text-secondary: #64748B; /* Secondary text color */
    --mchc-text-light: #FFFFFF;    /* Light text on dark backgrounds */
}

/* Utility Classes for McHC Colors */
.mchc-bg-blue { background-color: var(--mchc-blue); }
.mchc-bg-gold { background-color: var(--mchc-gold); }
.mchc-bg-green { background-color: var(--mchc-green); }
.mchc-bg-red { background-color: var(--mchc-red); }
.mchc-bg-navy { background-color: var(--mchc-navy); }

.mchc-text-blue { color: var(--mchc-blue); }
.mchc-text-gold { color: var(--mchc-gold); }
.mchc-text-green { color: var(--mchc-green); }
.mchc-text-red { color: var(--mchc-red); }
.mchc-text-navy { color: var(--mchc-navy); }

.mchc-border-blue { border-color: var(--mchc-blue); }
.mchc-border-gold { border-color: var(--mchc-gold); }
.mchc-border-green { border-color: var(--mchc-green); }
.mchc-border-red { border-color: var(--mchc-red); }
.mchc-border-navy { border-color: var(--mchc-navy); }

/* Hover States */
.mchc-hover-bg-blue:hover { background-color: var(--mchc-blue-dark); }
.mchc-hover-bg-gold:hover { background-color: var(--mchc-gold-dark); }
.mchc-hover-bg-green:hover { background-color: var(--mchc-green-dark); }
.mchc-hover-bg-red:hover { background-color: var(--mchc-red-dark); }

.mchc-hover-text-blue:hover { color: var(--mchc-blue-dark); }
.mchc-hover-text-gold:hover { color: var(--mchc-gold-dark); }
.mchc-hover-text-green:hover { color: var(--mchc-green-dark); }
.mchc-hover-text-red:hover { color: var(--mchc-red-dark); }

/* Focus States */
.mchc-focus-ring-blue:focus { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(8, 94, 216, 0.1); 
    border-color: var(--mchc-blue); 
}

.mchc-focus-ring-gold:focus { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(240, 173, 5, 0.1); 
    border-color: var(--mchc-gold); 
}

.mchc-focus-ring-green:focus { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(10, 149, 57, 0.1); 
    border-color: var(--mchc-green); 
}

.mchc-focus-ring-red:focus { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(233, 15, 33, 0.1); 
    border-color: var(--mchc-red); 
}

/* Button Styles */
.mchc-btn-primary {
    background-color: var(--mchc-blue);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.mchc-btn-primary:hover {
    background-color: var(--mchc-blue-dark);
    transform: translateY(-1px);
}

.mchc-btn-secondary {
    background-color: var(--mchc-gold);
    color: var(--mchc-navy);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.mchc-btn-secondary:hover {
    background-color: var(--mchc-gold-dark);
    transform: translateY(-1px);
}

.mchc-btn-success {
    background-color: var(--mchc-green);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.mchc-btn-success:hover {
    background-color: var(--mchc-green-dark);
    transform: translateY(-1px);
}

.mchc-btn-danger {
    background-color: var(--mchc-red);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.mchc-btn-danger:hover {
    background-color: var(--mchc-red-dark);
    transform: translateY(-1px);
}

/* Card Styles */
.mchc-card {
    background-color: white;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.mchc-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.mchc-card-header {
    background-color: var(--mchc-blue);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Navigation Styles */
.mchc-nav-bg {
    background-color: var(--mchc-blue);
}

.mchc-nav-link {
    color: white;
    transition: all 0.2s;
}

.mchc-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--mchc-gold);
}

.mchc-nav-link.active {
    background-color: var(--mchc-blue-dark);
    color: white;
}

/* Status Indicators */
.mchc-status-success {
    background-color: var(--mchc-green);
    color: white;
}

.mchc-status-warning {
    background-color: var(--mchc-gold);
    color: var(--mchc-navy);
}

.mchc-status-error {
    background-color: var(--mchc-red);
    color: white;
}

.mchc-status-info {
    background-color: var(--mchc-blue);
    color: white;
}

/* Form Styles */
.mchc-input {
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s;
}

.mchc-input:focus {
    border-color: var(--mchc-blue);
    box-shadow: 0 0 0 3px rgba(8, 94, 216, 0.1);
    outline: none;
}

.mchc-select {
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background-color: white;
    transition: all 0.2s;
}

.mchc-select:focus {
    border-color: var(--mchc-blue);
    box-shadow: 0 0 0 3px rgba(8, 94, 216, 0.1);
    outline: none;
}

/* Logo and Branding */
.mchc-logo {
    font-weight: bold;
    color: var(--mchc-blue);
}

.mchc-logo-accent {
    color: var(--mchc-gold);
}

/* Responsive Design */
@media (max-width: 768px) {
    .mchc-btn-primary,
    .mchc-btn-secondary,
    .mchc-btn-success,
    .mchc-btn-danger {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}