:root {
    /* Palette: Ocean Trust */
    --primary: #0066CC;
    --primary-dark: #004499;
    --secondary: #004499;
    --accent: #FF6B35;

    /* Text colors - ALWAYS use neutral colors */
    --heading: #111827;        /* Headings: always near-black */
    --text: #1E293B;           /* Body: dark slate from palette */
    --text-muted: #64748B;     /* Secondary text */

    /* Surfaces */
    --surface: #F8FAFC;
    --surface-alt: #E2E8F0;
    --surface-dark: #0F172A;

    /* On surfaces - text colors for each surface */
    --on-surface: #1E293B;
    --on-surface-alt: #1E293B;
    --on-dark: #F8FAFC;
    --on-primary: #FFFFFF;

    /* Fonts */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Typography - headings always neutral */
body {
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--text);
    background: var(--surface);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, system-ui, sans-serif);
    color: var(--heading);
}

/* Bulma overrides */
.title {
    color: var(--heading) !important;
}

.subtitle {
    color: var(--text-muted) !important;
}

/* Dark sections */
.has-background-dark,
.footer.has-background-dark,
.section-dark {
    background-color: var(--surface-dark) !important;
    color: var(--on-dark);
}

.has-background-dark .title,
.footer .title,
.section-dark .title,
.section-dark h1,
.section-dark h2,
.section-dark h3 {
    color: #FFFFFF !important;
}

/* Primary colored sections (hero, CTA) */
.hero.is-primary,
.section-primary,
.has-background-primary {
    background-color: var(--primary) !important;
    color: var(--on-primary);
}

.hero.is-primary .title,
.hero.is-primary .subtitle,
.section-primary .title,
.section-primary h1,
.section-primary h2 {
    color: #FFFFFF !important;
}

/* Light alternate sections */
.has-background-light,
.section-alt {
    background-color: var(--surface-alt) !important;
    color: var(--on-surface-alt);
}

.has-background-light .title,
.section-alt .title {
    color: var(--heading) !important;
}

/* Links and accents */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

/* Buttons */
.button.is-primary {
    background-color: var(--primary);
    border-color: transparent;
    color: var(--on-primary);
}

.button.is-primary:hover {
    background-color: var(--primary-dark);
}

/* Cards on any background */
.box, .card {
    background: var(--surface);
    color: var(--text);
}

.box .title,
.card .title {
    color: var(--heading) !important;
}