/* Water palette for public, Account and Employee pages only.
   /Admin/ never loads this stylesheet. No layout or semantic status changes. */
:root {
    --sm-deep-navy: #082a4a;
    --sm-navy: #09273a;
    --sm-ocean: #0b3d68;
    --sm-cobalt: #165dad;
    --sm-pool: #199fe8;
    --sm-sky: #6ccff6;
    --sm-ice: #f4fbff;
    --sm-ice-2: #eaf7ff;
    --sm-white: #ffffff;
    --sm-lime: #d5f875;
    --sm-text: #09273a;
    --sm-muted: #526775;
    --sm-border: #ddefff;
    --sm-control-border: #b8d5e5;
    --sm-water: #20b8f4;
    --sm-pool-light: #38bdf8;
    --sm-ocean-light: #124f83;
    --sm-depth: #061f36;
    --sm-hero-surface: linear-gradient(135deg, var(--sm-deep-navy) 0%, var(--sm-ocean) 55%, var(--sm-ocean-light) 100%);
    --sm-membership-surface: linear-gradient(135deg, var(--sm-deep-navy) 0%, var(--sm-ocean) 60%, var(--sm-cobalt) 100%);
    --sm-focus-halo: rgb(108 207 246 / 24%);
    --ink: var(--sm-text);
    --muted: var(--sm-muted);
    --paper: var(--sm-ice);
    --line: var(--sm-border);
    --lime: var(--sm-lime);
}

/* Major surfaces: deep water, white foam and shallow-water blue. */
.hero, .business-hero { background: var(--sm-hero-surface); }
.hero-strip { background: var(--sm-depth); color: var(--sm-white); }
#services, .detail-enhancements, #contact { background: var(--sm-ice); }
.service-card, .enhancement-tile { background: var(--sm-white); }
.membership-panel { background: var(--sm-membership-surface); }
.why-section, .site-footer { background: var(--sm-white); }
.site-footer nav a { color: var(--sm-ocean); }
/* Keep link text dark enough on white; pool blue supplies the hover underline. */
.site-footer nav a:hover { color: var(--sm-cobalt); text-decoration-color: var(--sm-pool); }

/* Cobalt is the everyday action; pool is reserved for marketing CTAs. */
.button-lime, .service-add-action .button, .button.cart-checkout,
.contact-form-actions .button-dark, .business-form .button-dark {
    background: var(--sm-cobalt);
    color: var(--sm-white);
}
.button-dark { background: var(--sm-deep-navy); color: var(--sm-white); }
.enhancement-tile .button, .fleet-section .button,
.location-contact-open { background: var(--sm-ocean); color: var(--sm-white); }
.button.header-cta, .hero .button-lime, .business-hero .button-lime,
.membership-panel .button-lime {
    background: var(--sm-pool);
    color: var(--sm-deep-navy);
}
.button-lime:hover, .button-dark:hover, .service-add-action .button:hover,
.button.cart-checkout:hover, .contact-form-actions .button-dark:hover,
.business-form .button-dark:hover { background: var(--sm-ocean); color: var(--sm-white); }
.button.header-cta:hover, .hero .button-lime:hover, .business-hero .button-lime:hover,
.membership-panel .button-lime:hover, .enhancement-tile .button:hover,
.location-contact-open:hover { background: var(--sm-cobalt); color: var(--sm-white); }
.fleet-section .button:hover { background: var(--sm-pool); color: var(--sm-deep-navy); }
.button-outline { border-color: var(--sm-pool); color: var(--sm-white); }
.button-outline:hover { background: var(--sm-ocean); }
.skip-link { background: var(--sm-pool); color: var(--sm-deep-navy); }

.main-nav a:hover, .site-footer nav a:hover, .business-card a,
.cart-remove, .location-directions { color: var(--sm-cobalt); }
.employee-navigation a, .admin-nav a { color: var(--sm-ocean); }
.employee-navigation a:hover, .admin-nav a:hover { color: var(--sm-cobalt); }
.employee-navigation a[aria-current=page], .admin-nav a[aria-current=page] {
    background: var(--sm-sky);
    color: var(--sm-deep-navy);
}

/* Bright water headline and sky highlights on deep ocean surfaces. */
.hero h1 > span, .business-hero h1 > span { color: var(--sm-water); }
.business-hero .eyebrow, .membership-panel .eyebrow,
.membership-copy .membership-price { color: var(--sm-sky); }
.hero .eyebrow, .hero-description, .hero-note,
.business-hero p:not(.eyebrow), .membership-copy > p { color: var(--sm-border); }
.hero-strip { border-color: var(--sm-muted); }
.membership-illustration circle { fill: var(--sm-deep-navy); }
.membership-illustration path[stroke="#d5f875"] { stroke: var(--sm-sky); }
.membership-illustration path:last-child { stroke: var(--sm-lime); }

/* White cards stay quiet; the featured card has a pool-blue border. */
.service-card.featured { background: var(--sm-ice-2); border-color: var(--sm-pool); }
.service-symbol, .service-coverage svg { color: var(--sm-cobalt); }
.service-card:first-child .service-symbol { color: var(--sm-pool); }
.service-card:last-child .service-symbol { color: var(--sm-sky); }
.enhancement-tile.is-selected { background: var(--sm-ice-2); border-color: var(--sm-pool); }
.enhancement-tile h3 { color: var(--sm-cobalt); }
.enhancement-icon, .business-icon, .value-icon {
    background: var(--sm-ice-2);
    color: var(--sm-cobalt);
}
.is-selected .enhancement-icon { background: var(--sm-sky); color: var(--sm-navy); }
.value-grid > :nth-child(1) .value-icon { color: var(--sm-pool); }
.value-grid > :nth-child(2) .value-icon { background: var(--sm-sky); color: var(--sm-navy); }
.value-grid > :nth-child(3) .value-icon { color: var(--sm-cobalt); }
.fleet-section, .business-process { background: linear-gradient(90deg, var(--sm-ice-2), var(--sm-border)); }
.cart-totals { background: var(--sm-ice-2); }
.business-notice { background: var(--sm-ice-2); border-color: var(--sm-border); }
.business-billing { border-color: var(--sm-border); }
.location-companion { background: linear-gradient(145deg, var(--sm-pool), var(--sm-pool-light)); color: var(--sm-text); }
.location-companion a { color: var(--sm-navy); }
.location-directions { border-color: var(--sm-pool); background: var(--sm-ice); }
.cart-toggle:hover, .location-directions:hover { background: var(--sm-ice-2); }

.membership-panel .button-lime { background: var(--sm-water); color: var(--sm-text); }
.membership-panel .button-lime:hover { background: var(--sm-pool); color: var(--sm-text); }
/* Existing membership form identity allows a color-only portal treatment. */
.admin-card:has(input[name="membership"]) { background: var(--sm-membership-surface); color: var(--sm-white); }
.admin-card:has(input[name="membership"]) :focus-visible { outline-color: var(--sm-sky); }
.employee-navigation a { color: var(--sm-deep-navy); }
.ops-work-item:has(button[name="timerAction"][value="stop"]) { border-color: var(--sm-pool); }

/* Existing portal components, not Admin. Positive status lime stays intact. */
.admin-dashboard-card:hover, .admin-dashboard-card:focus-within { border-color: var(--sm-pool); }
.ops-table th, .users-table thead th { background: var(--sm-ice-2); }
.user-edit-toggle[aria-expanded=true], .hr-edit-toggle[aria-expanded=true] {
    background: var(--sm-sky);
    color: var(--sm-deep-navy);
}
.user-detail-row .user-editor, .hr-detail-row .hr-template-panel { border-left-color: var(--sm-pool); }
.admin-body input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.admin-body textarea, .admin-body select,
.business-form input, .business-form select, .business-form textarea,
.contact-dialog input:not([type=hidden]), .contact-dialog textarea { border-color: var(--sm-control-border); }
input[type=checkbox], input[type=radio], .addon-option input,
.admin-checkbox input, .admin-body input[type=radio] { accent-color: var(--sm-cobalt); }
/* Cobalt outline provides contrast; pool border/sky halo add water accents. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.admin-body :is(input, textarea, select, button):focus-visible,
.business-form :is(input, select, textarea, button):focus-visible,
.contact-dialog textarea:focus-visible, .location-scroller:focus-visible {
    outline-color: var(--sm-cobalt);
}
.admin-body input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus-visible,
.admin-body textarea:focus-visible, .admin-body select:focus-visible,
.business-form :is(input, select, textarea):focus-visible,
.contact-dialog input:not([type=hidden]):focus-visible, .contact-dialog textarea:focus-visible {
    border-color: var(--sm-pool);
    box-shadow: 0 0 0 4px var(--sm-focus-halo);
}
.hero :focus-visible, .membership-panel :focus-visible, .business-hero :focus-visible {
    outline-color: var(--sm-sky);
}
/* Lime remains on success/completed/active badges, tiny dots and sparkles.
   Existing error and warning colors are intentionally untouched. */