/* Coastal theme: cool accents with airy nav and panel surfaces */
body[data-section-theme="coastal"] {
    --color-brand-50: #e8f3f3;
    --color-brand-100: #c8e4e4;
    --color-brand-200: #9fd0d2;
    --color-brand-400: #4ea4ab;
    --color-brand-500: #2f8790;
    --color-brand-600: #2a7680;
    --color-brand-700: #225f67;
    --color-brand-800: #1b4c53;

    --color-fg-on-brand: #f4fcfd;
    --section-nav-bg: #f7fbfb;
    --section-nav-border: #c8e4e4;
    --section-nav-bar-shadow: 0 6px 18px rgba(27, 76, 83, 0.14);
    --section-nav-link: #19464b;
    --section-nav-link-hover-bg: #e8f3f3;
    --section-nav-link-hover: #225f67;
    --section-nav-active-bg: #c8e4e4;
    --section-nav-active-text: #1b4c53;
    --section-submenu-bg: #f7fbfb;
    --section-submenu-link: #24585d;
    --section-submenu-hover-bg: #e9f5f6;
    --section-submenu-hover-text: #225f67;
    --section-submenu-active-bg: #d9ecee;
    --section-submenu-active-text: #1b4c53;
    --section-page-bg: #d8e0e1;
    --section-page-canvas: #f6fbfb;
    --section-surface-card-bg: #fbfefe;
    --section-surface-card-border: #c8e4e4;
    --section-text-muted: #31595d;
    --section-masthead-title: #f4fcfd;
    --section-masthead-bg-image: linear-gradient(rgba(8, 37, 41, 0.58), rgba(8, 37, 41, 0.58)),
        linear-gradient(120deg, #2b6b71 0%, #1f4f54 58%, #12383d 100%);
    --section-banner-overlay-bg: rgba(27, 76, 83, 0.88);
    --section-banner-overlay-text: #f4fcfd;
}