/* A salon's purchased brand applies to both the panel and its customer pages. */
html[data-salon-theme] {
    --brand-primary: var(--salon-accent, #872e59);
    --brand-dark: color-mix(in srgb, var(--brand-primary) 38%, #190d18);
    --brand-deeper: color-mix(in srgb, var(--brand-primary) 20%, #0b070b);
}
html[data-salon-theme="rose"] { --brand-secondary: #e8b4a0; --brand-gold-light: #f0cdbf; }
html[data-salon-theme="emerald"] { --brand-secondary: #d8c89a; --brand-gold-light: #e7dfbf; }
html[data-salon-theme="ocean"] { --brand-secondary: #a5d8ff; --brand-gold-light: #cee9ff; }
html[data-salon-theme="mono"] { --brand-secondary: #bbbbbb; --brand-gold-light: #eeeeee; }
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #131017; --surface: #1e1924; --surface-subtle: #27212e;
    --surface-glass: rgba(30,25,36,.9); --ink: #f5f2f8; --ink-subtle: #d3cbdc; --muted: #b5acbf;
    --border-subtle: rgba(255,255,255,.14); --brand-gold-subtle: #312b27;
}
html[data-theme="light"] { color-scheme: light; }
html[data-salon-theme] .admin-sidebar { background: linear-gradient(195deg, var(--brand-deeper), var(--brand-dark)); }
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .form-label { color: var(--ink) !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .stylist-card,
html[data-theme="dark"] .service-pick,
html[data-theme="dark"] .vip-ticket > .p-4 { background: var(--surface) !important; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background-color: var(--surface-subtle); color: var(--ink); border-color: var(--border-subtle); }
html[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
html[data-theme="dark"] .glass-card h2 { color: var(--ink) !important; }
html[data-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #f5f2f8; --bs-btn-border-color: #988fa3;
    --bs-btn-hover-color: #131017; --bs-btn-hover-bg: #f5f2f8; --bs-btn-hover-border-color: #f5f2f8;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Bootstrap utilities and calendar controls need readable colors on dark surfaces. */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: #c7becf !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { color: var(--ink) !important; }
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light { --bs-btn-color: #f5f2f8; --bs-btn-bg: #302837; --bs-btn-border-color: #746a7c; --bs-btn-hover-color: #16111a; --bs-btn-hover-bg: #f5f2f8; }
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-body-secondary { color: var(--ink-subtle) !important; }
html[data-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--ink); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--surface-subtle); }
html[data-theme="dark"] .category-tab,
html[data-theme="dark"] .employee-btn,
html[data-theme="dark"] .day-pick,
html[data-theme="dark"] .slot-btn,
html[data-theme="dark"] .step-dot,
html[data-theme="dark"] .slider-nav-btn,
html[data-theme="dark"] .luxury-accordion .accordion-button { background:var(--surface); color:var(--ink); border-color:var(--border-subtle); }
html[data-theme="dark"] .category-tab:hover,
html[data-theme="dark"] .employee-btn:hover,
html[data-theme="dark"] .slot-btn:hover { color:var(--ink); background:var(--surface-subtle); }
html[data-theme="dark"] .category-tab.active,
html[data-theme="dark"] .employee-btn.active,
html[data-theme="dark"] .day-pick.selected,
html[data-theme="dark"] .slot-btn.selected,
html[data-theme="dark"] .step-dot.active { background:var(--brand-primary); color:#fff; }
html[data-theme="dark"] .service-pick.selected { background:var(--surface-subtle)!important; color:var(--ink); }
html[data-theme="dark"] .step-line { background:var(--border-subtle); }
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .stylist-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .vip-ticket,
html[data-theme="dark"] .luxury-accordion .accordion-item { background:var(--surface)!important; color:var(--ink); }
html[data-theme="dark"] .luxury-accordion .accordion-button:not(.collapsed) { background:var(--surface-subtle); color:var(--ink); }