/* WMH Verification Program Brand Colors */
:root {
    --brand-primary: #12abdf; /* Blue */
    --brand-secondary: #76c043; /* Green */
    --brand-accent: #f2673d; /* Orange/Red */

    /* Lighter variations for backgrounds and borders */
    --brand-primary-light: #12abdf20;
    --brand-secondary-light: #76c04320;
    --brand-accent-light: #f2673d20;

    /* Darker variations for hover states */
    --brand-primary-dark: #0e8ab3;
    --brand-secondary-dark: #5da035;
    --brand-accent-dark: #d4552f;
}

/* Utility Classes for Brand Colors */
.bg-brand-primary {
    background-color: var(--brand-primary);
}
.bg-brand-secondary {
    background-color: var(--brand-secondary);
}
.bg-brand-accent {
    background-color: var(--brand-accent);
}

.bg-brand-primary-light {
    background-color: var(--brand-primary-light);
}
.bg-brand-secondary-light {
    background-color: var(--brand-secondary-light);
}
.bg-brand-accent-light {
    background-color: var(--brand-accent-light);
}

.text-brand-primary {
    color: var(--brand-primary);
}
.text-brand-secondary {
    color: var(--brand-secondary);
}
.text-brand-accent {
    color: var(--brand-accent);
}

.text-brand-primary-dark {
    color: var(--brand-primary-dark);
}
.text-brand-secondary-dark {
    color: var(--brand-secondary-dark);
}
.text-brand-accent-dark {
    color: var(--brand-accent-dark);
}

.border-brand-primary {
    border-color: var(--brand-primary);
}
.border-brand-secondary {
    border-color: var(--brand-secondary);
}
.border-brand-accent {
    border-color: var(--brand-accent);
}

/* Focus states */
.focus-brand-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-primary-light);
    border-color: var(--brand-primary);
}

.focus-brand-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-secondary-light);
    border-color: var(--brand-secondary);
}

.focus-brand-accent:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-accent-light);
    border-color: var(--brand-accent);
}

/* Hover states */
.hover-brand-primary:hover {
    background-color: var(--brand-primary-dark);
}
.hover-brand-secondary:hover {
    background-color: var(--brand-secondary-dark);
}
.hover-brand-accent:hover {
    background-color: var(--brand-accent-dark);
}

/* Button styles */
.btn-brand-primary {
    background-color: var(--brand-primary);
    color: white;
    border: 1px solid var(--brand-primary);
    transition: all 0.15s ease-in-out;
}

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

.btn-brand-secondary {
    background-color: var(--brand-secondary);
    color: white;
    border: 1px solid var(--brand-secondary);
    transition: all 0.15s ease-in-out;
}

.btn-brand-secondary:hover {
    background-color: var(--brand-secondary-dark);
    border-color: var(--brand-secondary-dark);
}

.btn-brand-accent {
    background-color: var(--brand-accent);
    color: white;
    border: 1px solid var(--brand-accent);
    transition: all 0.15s ease-in-out;
}

.btn-brand-accent:hover {
    background-color: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
}

/* Gradient backgrounds */
.bg-brand-gradient-primary {
    background: linear-gradient(
        135deg,
        var(--brand-primary) 0%,
        var(--brand-primary-dark) 100%
    );
}

.bg-brand-gradient-secondary {
    background: linear-gradient(
        135deg,
        var(--brand-secondary) 0%,
        var(--brand-secondary-dark) 100%
    );
}

.bg-brand-gradient-accent {
    background: linear-gradient(
        135deg,
        var(--brand-accent) 0%,
        var(--brand-accent-dark) 100%
    );
}

/* Mixed gradients */
.bg-brand-gradient-mixed {
    background: linear-gradient(
        135deg,
        var(--brand-primary) 0%,
        var(--brand-secondary) 50%,
        var(--brand-accent) 100%
    );
}