/*
 * Yatoon color-scheme layer (4.7.6).
 *
 * This is intentionally an overlay, not a second copy of each surface's CSS.
 * Brand templates continue to own --primary-color and geometry; this file owns
 * semantic canvas, surface, text and border tokens for the selected scheme.
 */

/* Explicit light keeps native controls predictable when the visitor's OS is dark. */
.sbs-booking-container[data-yatoon-color-scheme="light"],
.sbs-booking-container[data-yatoon-color-scheme="follow-system"],
.yatoon-staff-portal-page[data-yatoon-color-scheme="light"],
body.yatoon-app-shell-on.yatoon-color-scheme-light {
    color-scheme: light;
}

/* Every dark selector is rooted in a Yatoon-owned surface. Nothing here can
 * restyle the host site or a native WordPress screen. */
.sbs-booking-container[data-yatoon-color-scheme="dark"],
#sbs-mobile-cart-bar[data-yatoon-color-scheme="dark"],
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"],
#sbs-text-us-btn[data-yatoon-color-scheme="dark"],
#sbs-text-us-modal[data-yatoon-color-scheme="dark"],
#sbs-waitlist-modal[data-yatoon-color-scheme="dark"],
.yatoon-staff-portal-page[data-yatoon-color-scheme="dark"],
body.yatoon-app-shell-on.yatoon-color-scheme-dark {
    color-scheme: dark;
    --yatoon-scheme-canvas: #111827;
    --yatoon-scheme-surface: #182235;
    --yatoon-scheme-surface-raised: #223049;
    --yatoon-scheme-soft: #111c2e;
    --yatoon-scheme-text: #f8fafc;
    --yatoon-scheme-muted: #b7c2d4;
    --yatoon-scheme-border: #3b4a63;
    --yatoon-scheme-border-strong: #586982;
    --yatoon-scheme-primary-text: #fff;
    --yatoon-scheme-success-bg: #047857;
    --yatoon-scheme-success-text: #fff;
    --yatoon-scheme-shadow: 0 16px 42px rgba(0, 0, 0, .32);
    --y4-canvas: var(--yatoon-scheme-canvas);
    --y4-surface: var(--yatoon-scheme-surface);
    --y4-surface-raised: var(--yatoon-scheme-surface-raised);
    --y4-text: var(--yatoon-scheme-text);
    --y4-muted: var(--yatoon-scheme-muted);
    --y4-subtle: #94a3b8;
    --y4-border: var(--yatoon-scheme-border);
    --y4-border-strong: var(--yatoon-scheme-border-strong);
    --sbs-surface: var(--yatoon-scheme-surface);
    --sbs-soft: var(--yatoon-scheme-soft);
    --sbs-line: var(--yatoon-scheme-border);
    --sbs-ink: var(--yatoon-scheme-text);
    --sbs-muted: var(--yatoon-scheme-muted);
    --sp-ink: var(--yatoon-scheme-text);
    --sp-ink2: #d5deeb;
    --sp-muted: var(--yatoon-scheme-muted);
    --sp-border: var(--yatoon-scheme-border);
    --sp-bg: var(--yatoon-scheme-canvas);
    --sp-card: var(--yatoon-scheme-surface);
    --adm-ink: var(--yatoon-scheme-text);
    --adm-ink2: #d5deeb;
    --adm-muted: var(--yatoon-scheme-muted);
    --adm-line: var(--yatoon-scheme-border);
    --adm-surface: var(--yatoon-scheme-surface);
    --adm-surface2: var(--yatoon-scheme-canvas);
    --adm-surface3: var(--yatoon-scheme-soft);
    --yt-ink: var(--yatoon-scheme-text);
    --yt-ink-2: #d5deeb;
    --yt-muted: var(--yatoon-scheme-muted);
    --yt-muted-2: #aab7ca;
    --yt-bg: var(--yatoon-scheme-canvas);
    --yt-card: var(--yatoon-scheme-surface);
    --yt-border: var(--yatoon-scheme-border);
    --yt-border-soft: var(--yatoon-scheme-soft);
    --yapp-ink: var(--yatoon-scheme-text);
    --yapp-ink-soft: #c2cede;
    --yapp-muted: var(--yatoon-scheme-muted);
    --yapp-border: var(--yatoon-scheme-border);
    --yapp-surface: var(--yatoon-scheme-surface);
    --yapp-surface-2: var(--yatoon-scheme-canvas);
    --yapp-active-bg: #f8fafc;
    --yapp-active-text: #111827;
}

/* Booking widget, including its fixed mobile controls and modal surfaces. */
.sbs-booking-container[data-yatoon-color-scheme="dark"],
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-form-step, .sbs-booking-main, .sbs-booking-sidebar, .sbs-booking-summary, .sbs-customer-form, .sbs-calendar-container, .sbs-options-container, .sbs-service-item, .sbs-option-item, .sbs-staff-card, .sbs-time-slot, .sbs-day-button, .sbs-appt-type-card, .sbs-venue-hero, .sbs-category-tabs-wrap, .sbs-portal-banner, .yatoon-ai-helper),
#sbs-mobile-cart-bar[data-yatoon-color-scheme="dark"],
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"],
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"] .sbs-booking-summary,
#sbs-text-us-modal[data-yatoon-color-scheme="dark"] .sbs-text-modal-content,
#sbs-waitlist-modal[data-yatoon-color-scheme="dark"] .sbs-text-modal-content {
    background: var(--yatoon-scheme-surface) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}

/* The compact booking shell has a legacy `body .sbs-booking-container`
 * background rule for phones. Retain its specificity so Dark wins at the
 * mobile breakpoint without touching the host page. */
body .sbs-booking-container[data-yatoon-color-scheme="dark"] {
    background: var(--yatoon-scheme-surface) !important;
}

.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(p, label, h1, h2, h3, h4, .sbs-service-desc, .sbs-summary-label, .sbs-summary-value, .sbs-step-title, .sbs-venue-kicker),
#sbs-mobile-cart-bar[data-yatoon-color-scheme="dark"] :is(#sbs-cart-name, #sbs-cart-meta),
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"] :is(p, span, h2, h3, button),
#sbs-text-us-modal[data-yatoon-color-scheme="dark"] :is(p, label, h2, h3),
#sbs-waitlist-modal[data-yatoon-color-scheme="dark"] :is(p, label, h2, h3) {
    color: var(--yatoon-scheme-text) !important;
}

.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(input, select, textarea, .sbs-category-tab, #sbs-cat-more-btn),
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"] :is(input, select, textarea, button),
#sbs-text-us-modal[data-yatoon-color-scheme="dark"] :is(input, select, textarea, button),
#sbs-waitlist-modal[data-yatoon-color-scheme="dark"] :is(input, select, textarea, button) {
    background-color: var(--yatoon-scheme-surface-raised) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}

.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.selected, .active, .is-selected):not(.sbs-btn):not(.sbs-book-btn),
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-option-item:has(input:checked) {
    background: color-mix(in srgb, var(--primary-color, #ec4899) 22%, var(--yatoon-scheme-surface)) !important;
    border-color: var(--primary-color, #ec4899) !important;
}

.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-btn-next, .sbs-btn-submit, .sbs-book-btn, .sbs-time-slot.selected, .sbs-day-button.selected, .sbs-category-tab.active),
#sbs-mobile-cart-bar[data-yatoon-color-scheme="dark"] :is(#sbs-cart-back-btn, #sbs-cart-next-btn, #sbs-cart-expand-btn) {
    color: var(--yatoon-scheme-primary-text, #fff) !important;
    background-color: var(--primary-color, #ec4899) !important;
    border-color: var(--primary-color, #ec4899) !important;
}

.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-venue-hero, .sbs-category-tabs-wrap) {
    background-image: none !important;
}

/* Staff Portal is a self-contained public page. The base stylesheet already
 * uses --sp-* extensively; these few literal-surface overrides cover login,
 * sheets, cards, schedule and bottom navigation without duplicating it. */
.yatoon-staff-portal-page[data-yatoon-color-scheme="dark"],
.yatoon-staff-portal-page[data-yatoon-color-scheme="dark"] :is(#ysp-login-screen, .ysp-topbar, .ysp-day-tabs, .ysp-bottom-nav, .ysp-sheet, .ysp-card, .ysp-appointment-card, .ysp-calendar-card, .ysp-month-cell, .ysp-service-option, .ysp-numpad-btn, .ysp-input, .ysp-google-login) {
    background: var(--yatoon-scheme-surface) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}

.yatoon-staff-portal-page[data-yatoon-color-scheme="dark"] :is(.ysp-schedule, .ysp-calendar-toolbar, .ysp-day-tab, .ysp-view-switch, .ysp-calendar-options, .ysp-topbar-logout, .ysp-refresh-btn) {
    background: var(--yatoon-scheme-soft) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}

/* WordPress chrome is deliberately guarded by both app-shell and scheme
 * classes, so normal wp-admin remains byte-for-byte outside this layer. */
body.yatoon-app-shell-on.yatoon-color-scheme-dark :is(#wpbody-content, .wrap, .sbs-admin-page, .yatoon-admin-page, .yatoon-app-sidebar, .yatoon-app-topbar, .yatoon-app-search-results) {
    background-color: var(--yatoon-scheme-canvas);
    color: var(--yatoon-scheme-text);
}

body.yatoon-app-shell-on.yatoon-color-scheme-dark :is(.sbs-card, .yatoon-card, .postbox, .widefat, .wp-list-table, .yatoon-subtab-nav, .sbs-table-toolbar, .sbs-admin-table-wrap, .yd-card, .yd-panel, .yd-command, .notice.yatoon-keep-notice) {
    background-color: var(--yatoon-scheme-surface) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}

body.yatoon-app-shell-on.yatoon-color-scheme-dark :is(h1, h2, h3, h4, p, label, th, td, .description, .yatoon-admin-subtitle, .yatoon-app-brand, .yatoon-app-nav-label, .yatoon-app-nav a, .yatoon-app-sidebar-footer) {
    color: var(--yatoon-scheme-text) !important;
}

body.yatoon-app-shell-on.yatoon-color-scheme-dark :is(.yatoon-app-nav-label, .yatoon-app-nav a:not(.is-active):hover, .yatoon-app-nav a:not(.is-active):focus-visible) {
    background-color: var(--yatoon-scheme-surface-raised) !important;
    color: var(--yatoon-scheme-text) !important;
}

body.yatoon-app-shell-on.yatoon-color-scheme-dark :is(input, select, textarea, .button:not(.button-primary), .tablenav .button, .yatoon-subtab-btn) {
    background-color: var(--yatoon-scheme-surface-raised) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}

body.yatoon-app-shell-on.yatoon-color-scheme-dark .button-primary {
    background-color: var(--yt-pink, #ec4899) !important;
    border-color: var(--yt-pink, #ec4899) !important;
    color: #fff !important;
}

body.yatoon-app-shell-on.yatoon-color-scheme-dark .widefat :is(thead, tfoot, tr:nth-child(even)) {
    background-color: var(--yatoon-scheme-soft);
}

/* Follow system is the only public mode that responds to OS preference. */
@media (prefers-color-scheme: dark) {
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"],
    #sbs-mobile-cart-bar[data-yatoon-color-scheme="follow-system"],
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"],
    #sbs-text-us-btn[data-yatoon-color-scheme="follow-system"],
    #sbs-text-us-modal[data-yatoon-color-scheme="follow-system"],
    #sbs-waitlist-modal[data-yatoon-color-scheme="follow-system"] {
        color-scheme: dark;
        --yatoon-scheme-canvas: #111827;
        --yatoon-scheme-surface: #182235;
        --yatoon-scheme-surface-raised: #223049;
        --yatoon-scheme-soft: #111c2e;
        --yatoon-scheme-text: #f8fafc;
        --yatoon-scheme-muted: #b7c2d4;
        --yatoon-scheme-border: #3b4a63;
        --yatoon-scheme-border-strong: #586982;
        --yatoon-scheme-primary-text: #fff;
        --yatoon-scheme-success-bg: #047857;
        --yatoon-scheme-success-text: #fff;
        --y4-canvas: var(--yatoon-scheme-canvas);
        --y4-surface: var(--yatoon-scheme-surface);
        --y4-surface-raised: var(--yatoon-scheme-surface-raised);
        --y4-text: var(--yatoon-scheme-text);
        --y4-muted: var(--yatoon-scheme-muted);
        --y4-border: var(--yatoon-scheme-border);
        --y4-border-strong: var(--yatoon-scheme-border-strong);
        --sbs-surface: var(--yatoon-scheme-surface);
        --sbs-soft: var(--yatoon-scheme-soft);
        --sbs-line: var(--yatoon-scheme-border);
        --sbs-ink: var(--yatoon-scheme-text);
        --sbs-muted: var(--yatoon-scheme-muted);
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"],
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-form-step, .sbs-booking-main, .sbs-booking-sidebar, .sbs-booking-summary, .sbs-customer-form, .sbs-calendar-container, .sbs-options-container, .sbs-service-item, .sbs-option-item, .sbs-staff-card, .sbs-time-slot, .sbs-day-button, .sbs-appt-type-card, .sbs-venue-hero, .sbs-category-tabs-wrap, .sbs-portal-banner, .yatoon-ai-helper),
    #sbs-mobile-cart-bar[data-yatoon-color-scheme="follow-system"],
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"],
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"] .sbs-booking-summary,
    #sbs-text-us-modal[data-yatoon-color-scheme="follow-system"] .sbs-text-modal-content,
    #sbs-waitlist-modal[data-yatoon-color-scheme="follow-system"] .sbs-text-modal-content {
        background: var(--yatoon-scheme-surface) !important;
        border-color: var(--yatoon-scheme-border) !important;
        color: var(--yatoon-scheme-text) !important;
    }

    body .sbs-booking-container[data-yatoon-color-scheme="follow-system"] {
        background: var(--yatoon-scheme-surface) !important;
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(p, label, h1, h2, h3, h4, .sbs-service-desc, .sbs-summary-label, .sbs-summary-value, .sbs-step-title, .sbs-venue-kicker),
    #sbs-mobile-cart-bar[data-yatoon-color-scheme="follow-system"] :is(#sbs-cart-name, #sbs-cart-meta),
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"] :is(p, span, h2, h3, button),
    #sbs-text-us-modal[data-yatoon-color-scheme="follow-system"] :is(p, label, h2, h3),
    #sbs-waitlist-modal[data-yatoon-color-scheme="follow-system"] :is(p, label, h2, h3) {
        color: var(--yatoon-scheme-text) !important;
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(input, select, textarea, .sbs-category-tab, #sbs-cat-more-btn),
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"] :is(input, select, textarea, button),
    #sbs-text-us-modal[data-yatoon-color-scheme="follow-system"] :is(input, select, textarea, button),
    #sbs-waitlist-modal[data-yatoon-color-scheme="follow-system"] :is(input, select, textarea, button) {
        background-color: var(--yatoon-scheme-surface-raised) !important;
        border-color: var(--yatoon-scheme-border) !important;
        color: var(--yatoon-scheme-text) !important;
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.selected, .active, .is-selected):not(.sbs-btn):not(.sbs-book-btn),
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-option-item:has(input:checked) {
        background: color-mix(in srgb, var(--primary-color, #ec4899) 22%, var(--yatoon-scheme-surface)) !important;
        border-color: var(--primary-color, #ec4899) !important;
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-btn-next, .sbs-btn-submit, .sbs-book-btn, .sbs-time-slot.selected, .sbs-day-button.selected, .sbs-category-tab.active),
    #sbs-mobile-cart-bar[data-yatoon-color-scheme="follow-system"] :is(#sbs-cart-back-btn, #sbs-cart-next-btn, #sbs-cart-expand-btn) {
        color: var(--yatoon-scheme-primary-text, #fff) !important;
        background-color: var(--primary-color, #ec4899) !important;
        border-color: var(--primary-color, #ec4899) !important;
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-venue-hero, .sbs-category-tabs-wrap) {
        background-image: none !important;
    }
}

/* Halloween keeps a charcoal/plum dark hierarchy with a readable pumpkin
 * accent while remaining compatible with the shared semantic tokens. */
.sbs-booking-container.yatoon-template-halloween[data-yatoon-color-scheme="dark"] {
    --yatoon-scheme-canvas: #17151b;
    --yatoon-scheme-surface: #242029;
    --yatoon-scheme-surface-raised: #322a3c;
    --yatoon-scheme-soft: #1d1924;
    --yatoon-scheme-text: #faf7ff;
    --yatoon-scheme-muted: #c9bfd1;
    --yatoon-scheme-border: #51445d;
    --yatoon-scheme-border-strong: #776482;
    --yatoon-scheme-primary-text: #21131a;
    --y4-canvas: var(--yatoon-scheme-canvas);
    --y4-surface: var(--yatoon-scheme-surface);
    --y4-surface-raised: var(--yatoon-scheme-surface-raised);
    --y4-text: var(--yatoon-scheme-text);
    --y4-muted: var(--yatoon-scheme-muted);
    --y4-border: var(--yatoon-scheme-border);
    --y4-border-strong: var(--yatoon-scheme-border-strong);
    --sbs-surface: var(--yatoon-scheme-surface);
    --sbs-soft: var(--yatoon-scheme-soft);
    --sbs-line: var(--yatoon-scheme-border);
    --sbs-ink: var(--yatoon-scheme-text);
    --sbs-muted: var(--yatoon-scheme-muted);
    --primary-color: #f08a38;
    --primary-hover: #ffad63;
    --primary-light: #5c3323;
    --border-color: #51445d;
    --yatoon-halloween-purple: #a47bd4;
    --yatoon-halloween-green: #a9c957;
}

@media (prefers-color-scheme: dark) {
    .sbs-booking-container.yatoon-template-halloween[data-yatoon-color-scheme="follow-system"] {
        --yatoon-scheme-canvas: #17151b;
        --yatoon-scheme-surface: #242029;
        --yatoon-scheme-surface-raised: #322a3c;
        --yatoon-scheme-soft: #1d1924;
        --yatoon-scheme-text: #faf7ff;
        --yatoon-scheme-muted: #c9bfd1;
        --yatoon-scheme-border: #51445d;
        --yatoon-scheme-border-strong: #776482;
        --yatoon-scheme-primary-text: #21131a;
        --y4-canvas: var(--yatoon-scheme-canvas);
        --y4-surface: var(--yatoon-scheme-surface);
        --y4-surface-raised: var(--yatoon-scheme-surface-raised);
        --y4-text: var(--yatoon-scheme-text);
        --y4-muted: var(--yatoon-scheme-muted);
        --y4-border: var(--yatoon-scheme-border);
        --y4-border-strong: var(--yatoon-scheme-border-strong);
        --sbs-surface: var(--yatoon-scheme-surface);
        --sbs-soft: var(--yatoon-scheme-soft);
        --sbs-line: var(--yatoon-scheme-border);
        --sbs-ink: var(--yatoon-scheme-text);
        --sbs-muted: var(--yatoon-scheme-muted);
        --primary-color: #f08a38;
        --primary-hover: #ffad63;
        --primary-light: #5c3323;
        --border-color: #51445d;
        --yatoon-halloween-purple: #a47bd4;
        --yatoon-halloween-green: #a9c957;
    }
}

/* Festive Red keeps its own wine-red dark hierarchy while still using the
 * shared scheme selectors above for component coverage. */
.sbs-booking-container.yatoon-template-festive-red[data-yatoon-color-scheme="dark"] {
    --yatoon-scheme-canvas: #201116;
    --yatoon-scheme-surface: #2a161b;
    --yatoon-scheme-surface-raised: #3b1d26;
    --yatoon-scheme-soft: #24131a;
    --yatoon-scheme-text: #fff7f3;
    --yatoon-scheme-muted: #d2adb0;
    --yatoon-scheme-border: #67343d;
    --yatoon-scheme-border-strong: #92505a;
    --yatoon-scheme-primary-text: #201116;
    --y4-canvas: var(--yatoon-scheme-canvas);
    --y4-surface: var(--yatoon-scheme-surface);
    --y4-surface-raised: var(--yatoon-scheme-surface-raised);
    --y4-text: var(--yatoon-scheme-text);
    --y4-muted: var(--yatoon-scheme-muted);
    --y4-border: var(--yatoon-scheme-border);
    --y4-border-strong: var(--yatoon-scheme-border-strong);
    --sbs-surface: var(--yatoon-scheme-surface);
    --sbs-soft: var(--yatoon-scheme-soft);
    --sbs-line: var(--yatoon-scheme-border);
    --sbs-ink: var(--yatoon-scheme-text);
    --sbs-muted: var(--yatoon-scheme-muted);
    --primary-color: #d65d62;
    --primary-hover: #ef7778;
    --primary-light: #5e2630;
    --border-color: #67343d;
}

@media (prefers-color-scheme: dark) {
    .sbs-booking-container.yatoon-template-festive-red[data-yatoon-color-scheme="follow-system"] {
        --yatoon-scheme-canvas: #201116;
        --yatoon-scheme-surface: #2a161b;
        --yatoon-scheme-surface-raised: #3b1d26;
        --yatoon-scheme-soft: #24131a;
        --yatoon-scheme-text: #fff7f3;
        --yatoon-scheme-muted: #d2adb0;
        --yatoon-scheme-border: #67343d;
        --yatoon-scheme-border-strong: #92505a;
        --yatoon-scheme-primary-text: #201116;
        --y4-canvas: var(--yatoon-scheme-canvas);
        --y4-surface: var(--yatoon-scheme-surface);
        --y4-surface-raised: var(--yatoon-scheme-surface-raised);
        --y4-text: var(--yatoon-scheme-text);
        --y4-muted: var(--yatoon-scheme-muted);
        --y4-border: var(--yatoon-scheme-border);
        --y4-border-strong: var(--yatoon-scheme-border-strong);
        --sbs-surface: var(--yatoon-scheme-surface);
        --sbs-soft: var(--yatoon-scheme-soft);
        --sbs-line: var(--yatoon-scheme-border);
        --sbs-ink: var(--yatoon-scheme-text);
        --sbs-muted: var(--yatoon-scheme-muted);
        --primary-color: #d65d62;
        --primary-hover: #ef7778;
        --primary-light: #5e2630;
        --border-color: #67343d;
    }
}

/* Emerald's Dark accent is intentionally pale green, so its active controls
 * use dark ink instead of the shared white-on-primary default. */
.sbs-booking-container.yatoon-template-emerald[data-yatoon-color-scheme="dark"] {
    --yatoon-scheme-primary-text: #111827;
}
@media (prefers-color-scheme: dark) {
    .sbs-booking-container.yatoon-template-emerald[data-yatoon-color-scheme="follow-system"] {
        --yatoon-scheme-primary-text: #111827;
    }
}

/* ==================================================================
 * 4.7.6 dark-mode completion pass. Keep every declaration scoped to a
 * Yatoon-owned dark surface so Light mode and host-site variables are intact.
 * ================================================================== */
.sbs-booking-container[data-yatoon-color-scheme="dark"],
#sbs-mobile-cart-bar[data-yatoon-color-scheme="dark"],
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"],
#sbs-text-us-btn[data-yatoon-color-scheme="dark"],
#sbs-text-us-modal[data-yatoon-color-scheme="dark"],
#sbs-waitlist-modal[data-yatoon-color-scheme="dark"] {
    --yatoon-ui-ink: var(--yatoon-scheme-text);
    --yatoon-ui-muted: var(--yatoon-scheme-muted);
    --yatoon-ui-bg: var(--yatoon-scheme-canvas);
    --yatoon-ui-card: var(--yatoon-scheme-surface);
    --yatoon-ui-line: var(--yatoon-scheme-border);
    --yatoon-331-ink: var(--yatoon-scheme-text);
    --sbs-heading-color: var(--yatoon-scheme-text);
    --apple-ink: var(--yatoon-scheme-text);
    --apple-ink2: var(--yatoon-scheme-text);
    --apple-muted: var(--yatoon-scheme-muted);
    --apple-line: var(--yatoon-scheme-border);
    --apple-surface: var(--yatoon-scheme-surface);
    --apple-surface2: var(--yatoon-scheme-surface-raised);
}

.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-services-list, .sbs-step-accordion-item, .sbs-signin-trigger, .sbs-service-img-wrap, .sbs-progress-bar, .sbs-step-accordion-status, .sbs-summary-edit-btn, .sbs-summary-remove-btn, .sbs-summary-remove-service-btn) {
    background: var(--yatoon-scheme-surface) !important;
    border-color: var(--yatoon-scheme-border) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-summary-edit-btn, .sbs-summary-remove-btn, .sbs-summary-remove-service-btn) {
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-signin-trigger {
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-cat-tab:not(.active):not(.is-active) {
    background: var(--yatoon-scheme-surface-raised) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-service-details, .sbs-service-brief, .sbs-service-desc-wrap, .sbs-step-accordion-summary, .sbs-step-accordion-status, .sbs-staff-desc, .sbs-staff-role, .sbs-staff-bio, .sbs-prog-label) {
    color: var(--yatoon-scheme-muted) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-prog-step.completed .sbs-prog-label {
    color: var(--primary-color) !important;
}

#sbs-mobile-drawer[data-yatoon-color-scheme="dark"] #sbs-drawer-close-btn {
    background: var(--yatoon-scheme-surface-raised) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"] #sbs-drawer-close-btn:hover,
#sbs-mobile-drawer[data-yatoon-color-scheme="dark"] #sbs-drawer-close-btn:focus-visible {
    background: var(--yatoon-scheme-surface) !important;
    border-color: var(--yatoon-scheme-border-strong) !important;
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] #sbs-pending-services-banner {
    background: var(--yatoon-scheme-surface) !important;
    border-color: var(--yatoon-scheme-border) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] #sbs-pending-services-banner #sbs-pending-services-title {
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] #sbs-pending-services-banner :is(.sbs-banner-service-count, .sbs-banner-preview, .sbs-banner-disclosure-label) {
    color: var(--yatoon-scheme-muted) !important;
}

/* Active controls retain their semantic state colors over the active-step surface. */
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-prog-step.active .sbs-prog-dot,
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-day-button.sbs-day-button.selected,
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-month-cell.sbs-month-cell.selected,
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-time-slot.sbs-time-slot.selected,
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-step-accordion-item.is-active .sbs-step-accordion-num {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--yatoon-scheme-primary-text, #fff) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-day-button.selected, .sbs-month-cell.selected) :is(.sbs-day-name, .sbs-day-number),
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-time-slot.selected :is(.sbs-slot-time, .sbs-slot-check) {
    color: var(--yatoon-scheme-primary-text, #fff) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-prog-step.completed .sbs-prog-dot {
    background: var(--yatoon-scheme-success-bg) !important;
    border-color: var(--yatoon-scheme-success-bg) !important;
    color: var(--yatoon-scheme-success-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-prog-step.active .sbs-prog-label {
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] .sbs-prog-step.completed .sbs-prog-label {
    color: var(--primary-color) !important;
}

/* Later booking steps contain legacy literal white cards. Map only those
 * Yatoon-owned Dark surfaces to the shared scheme tokens; Light is untouched. */
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-progress-container, .sbs-mobile-flow-header, .sbs-venue-trust-strip, .sbs-checkout-trust-strip, .sbs-cart-item, .sbs-checkout-appt-card, .sbs-time-slots, .sbs-calendar-header, .sbs-next-openings, .sbs-tip-group, .sbs-gift-card-group, .sbs-success-next-card, .sbs-success-actions, .sbs-success-cal-row, .sbs-option-empty-note, .sbs-signin-options, .yatoon-ai-result) {
    background: var(--yatoon-scheme-surface) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-venue-trust-strip, .sbs-checkout-trust-grid) > div,
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-next-opening-chip, .sbs-date-shortcut, .sbs-week-prev, .sbs-week-next, .sbs-banner-edit-btn, .sbs-banner-remove-btn, .sbs-pending-edit-btn, .sbs-cart-edit, .sbs-cart-remove, .sbs-sidebar-edit-cart-btn, .sbs-sidebar-cart-edit, .sbs-sidebar-cart-remove, .sbs-tip-btn, .sbs-cal-btn, .sbs-success-action-link, .sbs-btn-manage-services-calendar, .yatoon-ai-toggle, .yatoon-share-pill, .yatoon-design-file-button, .sbs-signin-options > a) {
    background: var(--yatoon-scheme-surface-raised) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-cart-item, .sbs-checkout-appt-card, .sbs-step-accordion-item, .sbs-checkout-totals, .sbs-tip-group, .sbs-gift-card-group) :is(h4, strong, label, .sbs-step-accordion-title, .sbs-checkout-time) {
    color: var(--yatoon-scheme-text) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] :is(.sbs-review-staff-name, .sbs-signin-optional-note, .sbs-checkout-total-duration, .sbs-checkout-total-note) {
    background: var(--yatoon-scheme-soft) !important;
    border-color: var(--yatoon-scheme-border) !important;
    color: var(--yatoon-scheme-muted) !important;
}
.sbs-booking-container[data-yatoon-color-scheme="dark"] #sbs-gift-card-apply {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--yatoon-scheme-primary-text, #fff) !important;
}

@media (prefers-color-scheme: dark) {
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"],
    #sbs-mobile-cart-bar[data-yatoon-color-scheme="follow-system"],
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"],
    #sbs-text-us-btn[data-yatoon-color-scheme="follow-system"],
    #sbs-text-us-modal[data-yatoon-color-scheme="follow-system"],
    #sbs-waitlist-modal[data-yatoon-color-scheme="follow-system"] {
        --yatoon-ui-ink: var(--yatoon-scheme-text);
        --yatoon-ui-muted: var(--yatoon-scheme-muted);
        --yatoon-ui-bg: var(--yatoon-scheme-canvas);
        --yatoon-ui-card: var(--yatoon-scheme-surface);
        --yatoon-ui-line: var(--yatoon-scheme-border);
        --yatoon-331-ink: var(--yatoon-scheme-text);
        --sbs-heading-color: var(--yatoon-scheme-text);
        --apple-ink: var(--yatoon-scheme-text);
        --apple-ink2: var(--yatoon-scheme-text);
        --apple-muted: var(--yatoon-scheme-muted);
        --apple-line: var(--yatoon-scheme-border);
        --apple-surface: var(--yatoon-scheme-surface);
        --apple-surface2: var(--yatoon-scheme-surface-raised);
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-services-list, .sbs-step-accordion-item, .sbs-signin-trigger, .sbs-service-img-wrap, .sbs-progress-bar, .sbs-step-accordion-status, .sbs-summary-edit-btn, .sbs-summary-remove-btn, .sbs-summary-remove-service-btn) {
        background: var(--yatoon-scheme-surface) !important;
        border-color: var(--yatoon-scheme-border) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-summary-edit-btn, .sbs-summary-remove-btn, .sbs-summary-remove-service-btn) {
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-signin-trigger {
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-cat-tab:not(.active):not(.is-active) {
        background: var(--yatoon-scheme-surface-raised) !important;
        border-color: var(--yatoon-scheme-border) !important;
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-service-details, .sbs-service-brief, .sbs-service-desc-wrap, .sbs-step-accordion-summary, .sbs-step-accordion-status, .sbs-staff-desc, .sbs-staff-role, .sbs-staff-bio, .sbs-prog-label) {
        color: var(--yatoon-scheme-muted) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-prog-step.completed .sbs-prog-label {
        color: var(--primary-color) !important;
    }

    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"] #sbs-drawer-close-btn {
        background: var(--yatoon-scheme-surface-raised) !important;
        border-color: var(--yatoon-scheme-border) !important;
        color: var(--yatoon-scheme-text) !important;
    }
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"] #sbs-drawer-close-btn:hover,
    #sbs-mobile-drawer[data-yatoon-color-scheme="follow-system"] #sbs-drawer-close-btn:focus-visible {
        background: var(--yatoon-scheme-surface) !important;
        border-color: var(--yatoon-scheme-border-strong) !important;
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] #sbs-pending-services-banner {
        background: var(--yatoon-scheme-surface) !important;
        border-color: var(--yatoon-scheme-border) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] #sbs-pending-services-banner #sbs-pending-services-title {
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] #sbs-pending-services-banner :is(.sbs-banner-service-count, .sbs-banner-preview, .sbs-banner-disclosure-label) {
        color: var(--yatoon-scheme-muted) !important;
    }

    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-prog-step.active .sbs-prog-dot,
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-day-button.sbs-day-button.selected,
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-month-cell.sbs-month-cell.selected,
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-time-slot.sbs-time-slot.selected,
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-step-accordion-item.is-active .sbs-step-accordion-num {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: var(--yatoon-scheme-primary-text, #fff) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-day-button.selected, .sbs-month-cell.selected) :is(.sbs-day-name, .sbs-day-number),
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-time-slot.selected :is(.sbs-slot-time, .sbs-slot-check) {
        color: var(--yatoon-scheme-primary-text, #fff) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-prog-step.completed .sbs-prog-dot {
        background: var(--yatoon-scheme-success-bg) !important;
        border-color: var(--yatoon-scheme-success-bg) !important;
        color: var(--yatoon-scheme-success-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-prog-step.active .sbs-prog-label {
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] .sbs-prog-step.completed .sbs-prog-label {
        color: var(--primary-color) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-progress-container, .sbs-mobile-flow-header, .sbs-venue-trust-strip, .sbs-checkout-trust-strip, .sbs-cart-item, .sbs-checkout-appt-card, .sbs-time-slots, .sbs-calendar-header, .sbs-next-openings, .sbs-tip-group, .sbs-gift-card-group, .sbs-success-next-card, .sbs-success-actions, .sbs-success-cal-row, .sbs-option-empty-note, .sbs-signin-options, .yatoon-ai-result) {
        background: var(--yatoon-scheme-surface) !important;
        border-color: var(--yatoon-scheme-border) !important;
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-venue-trust-strip, .sbs-checkout-trust-grid) > div,
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-next-opening-chip, .sbs-date-shortcut, .sbs-week-prev, .sbs-week-next, .sbs-banner-edit-btn, .sbs-banner-remove-btn, .sbs-pending-edit-btn, .sbs-cart-edit, .sbs-cart-remove, .sbs-sidebar-edit-cart-btn, .sbs-sidebar-cart-edit, .sbs-sidebar-cart-remove, .sbs-tip-btn, .sbs-cal-btn, .sbs-success-action-link, .sbs-btn-manage-services-calendar, .yatoon-ai-toggle, .yatoon-share-pill, .yatoon-design-file-button, .sbs-signin-options > a) {
        background: var(--yatoon-scheme-surface-raised) !important;
        border-color: var(--yatoon-scheme-border) !important;
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-cart-item, .sbs-checkout-appt-card, .sbs-step-accordion-item, .sbs-checkout-totals, .sbs-tip-group, .sbs-gift-card-group) :is(h4, strong, label, .sbs-step-accordion-title, .sbs-checkout-time) {
        color: var(--yatoon-scheme-text) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] :is(.sbs-review-staff-name, .sbs-signin-optional-note, .sbs-checkout-total-duration, .sbs-checkout-total-note) {
        background: var(--yatoon-scheme-soft) !important;
        border-color: var(--yatoon-scheme-border) !important;
        color: var(--yatoon-scheme-muted) !important;
    }
    .sbs-booking-container[data-yatoon-color-scheme="follow-system"] #sbs-gift-card-apply {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: var(--yatoon-scheme-primary-text, #fff) !important;
    }
}