/* MyWaypoint Custom Styles - Sky Blue Brand Colors */

/* Brand Color Variables */
:root {
    --brand-50: #f0f9ff;
    --brand-100: #e0f2fe;
    --brand-200: #bae6fd;
    --brand-300: #7dd3fc;
    --brand-400: #38bdf8;
    --brand-500: #0ea5e9;
    --brand-600: #0284c7;
    --brand-700: #0369a1;
    --brand-800: #075985;
    --brand-900: #0c4a6e;
}

/* Hero Gradient Backgrounds */
.hero-gradient {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 50%, var(--brand-700) 100%);
}

/* Quote Section Gradient */
.quote-gradient {
    background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-600) 50%, var(--brand-700) 100%);
}

/* Light Brand Gradient Backgrounds */
.light-brand-gradient {
    background: linear-gradient(135deg, var(--brand-50) 0%, #ffffff 50%, var(--brand-50) 100%);
}

/* Service Card Icon Gradients */
.icon-gradient {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
}

/* CTA Card Gradient */
.cta-gradient {
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 50%, var(--brand-800) 100%);
}

/* Footer Gradient */
.footer-gradient {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, var(--brand-900) 100%);
}

/* Data Page Overview Gradient */
.overview-gradient {
    background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 50%, var(--brand-50) 100%);
}

/* Text Colors */
.text-brand-50 { color: var(--brand-50); }
.text-brand-100 { color: var(--brand-100); }
.text-brand-200 { color: var(--brand-200); }
.text-brand-300 { color: var(--brand-300); }
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.text-brand-800 { color: var(--brand-800); }
.text-brand-900 { color: var(--brand-900); }

/* Background Colors */
.bg-brand-50 { background-color: var(--brand-50); }
.bg-brand-100 { background-color: var(--brand-100); }
.bg-brand-200 { background-color: var(--brand-200); }
.bg-brand-300 { background-color: var(--brand-300); }
.bg-brand-400 { background-color: var(--brand-400); }
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-600 { background-color: var(--brand-600); }
.bg-brand-700 { background-color: var(--brand-700); }
.bg-brand-800 { background-color: var(--brand-800); }
.bg-brand-900 { background-color: var(--brand-900); }

/* Border Colors */
.border-brand-100 { border-color: var(--brand-100); }
.border-brand-200 { border-color: var(--brand-200); }
.border-brand-300 { border-color: var(--brand-300); }
.border-brand-500 { border-color: var(--brand-500); }
.border-brand-600 { border-color: var(--brand-600); }
.border-brand-700 { border-color: var(--brand-700); }
.border-brand-800 { border-color: var(--brand-800); }

/* Hero section gradient — replaces broken Tailwind gradient variable chain */
.section-gradient {
    background: linear-gradient(to bottom, #cdeffe, #ffffff);
}

/* Hover States */
.hover\:bg-brand-50:hover { background-color: var(--brand-50); }
.hover\:bg-brand-700:hover { background-color: var(--brand-700); }
.hover\:text-brand-300:hover { color: var(--brand-300); }
.hover\:text-brand-700:hover { color: var(--brand-700); }
.hover\:border-brand-200:hover { border-color: var(--brand-200); }
.hover\:border-brand-300:hover { border-color: var(--brand-300); }