/* Brand gradient (purple -> blue) and UX notes from senior UI/UX designer + psychologist
   Use CSS variables for easy theme-wide application. Contrast-focused for CTAs and headings.
*/
:root {
    --brand-gradient: linear-gradient(135deg, #4a2a81 0%, #0e385f 100%);
    --brand-start: #4a2a81;
    --brand-end: #0e385f;
    --brand-contrast: #ffffff;
    --cta-accent: #ff7a59; /* warm accent for action emphasis */
}

/* Utility classes */
.bg-brand-gradient {
    background: var(--brand-gradient) !important;
    color: var(--brand-contrast) !important;
}

.btn-brand {
    background: var(--brand-gradient);
    border: 0;
    color: var(--brand-contrast);
}

.btn-brand-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: var(--brand-contrast);
}

.text-on-brand {
    color: var(--brand-contrast);
}

/* Ensure readable CTA: add subtle drop shadow and focus ring */
.btn-cta {
    background: var(--cta-accent);
    border: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(14, 56, 95, 0.18);
}

.btn-cta:focus {
    outline: 3px solid rgba(255, 122, 89, 0.25);
}

/* For gradient hero overlays */
.hero-gradient-overlay {
    background: linear-gradient(180deg, rgba(10, 12, 20, 0.12), rgba(10, 12, 20, 0.36));
}