:root {
    --theme-bg: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-alt: #f3f3f3;
    --theme-text: #111111;
    --theme-muted: #595959;
    --theme-border: #d7c8b9;
}

html[data-theme="dark"] {
    --theme-bg: #121416;
    --theme-surface: #1c2024;
    --theme-surface-alt: #262b30;
    --theme-text: #f2f2f2;
    --theme-muted: #c3c8cc;
    --theme-border: #4a433d;
}

body,
.site-header {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

.site-header {
    border-bottom-color: var(--theme-border);
}

html[data-theme="dark"] .site-header.scrolled {
    background: rgba(18, 20, 22, .92);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .logo img,
html[data-theme="dark"] .footer-brand img {
    filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] :is(
    .class-card, .news-card, .instructor-card, .contact-card,
    .signup-card, .signup-form, .signup-summary, .signup-catalog-style,
    .signup-catalog-event, .price-card, .rental-card, .room-card,
    .rental-calendar, .timetable-table, .legal-document,
    .legal-archive-item, .modal-content, .cookie-consent,
    .cookie-settings-panel
) {
    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

html[data-theme="dark"] :is(
    input, textarea, select, .rental-calendar-day,
    .legal-version-row, .signup-option, .signup-question
) {
    background-color: var(--theme-surface-alt);
    color: var(--theme-text);
    border-color: #596168;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: #aeb5ba;
}

html[data-theme="dark"] :is(p, small, .form-character-counter, .cash-muted) {
    color: inherit;
}

html[data-theme="dark"] :is(.main-menu .signup-nav, .logo, a) {
    color: inherit;
}

html[data-theme="dark"] :is(.main-menu a.active, .main-menu .signup-nav.active) {
    background: #f0f0f0;
    color: #151515;
}

html[data-theme="dark"] :is(.timetable-grid, .prices-area, .classes-section,
    .news-section, .signup-catalog-page, .legal-page) {
    color: var(--theme-text);
}

/* Home is assembled lazily, so these rules intentionally outrank its
   dynamically loaded component stylesheet. */
html[data-theme="dark"] .home-intro,
html[data-theme="dark"] .home-page .classes-section,
html[data-theme="dark"] .home-page .news-slider-section {
    background: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="dark"] .home-page .classes-title-note {
    background: var(--theme-surface-alt);
    color: var(--theme-text);
    border-left-color: var(--blue);
}

html[data-theme="dark"] .home-page .tab-btn {
    background: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme="dark"] .home-page .tab-btn.active {
    background: #e8ecef;
    color: #151719;
}

html[data-theme="dark"] .home-page :is(.class-card, .studio-style-card, .news-slide) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #485057;
}

html[data-theme="dark"] .home-page :is(
    .class-card h2, .class-card p, .studio-style-card-title,
    .news-slide h3, .news-slide p, .classes-title h2,
    .news-slider-title h2
) {
    color: var(--theme-text);
}

html[data-theme="dark"] .home-page .photo-credit {
    color: var(--theme-muted);
}

html[data-theme="dark"] #homeModal .modal-box,
html[data-theme="dark"] #classModal .modal-box {
    background: var(--theme-surface);
    color: var(--theme-text);
}

html[data-theme="dark"] #homeModal :is(
    .modal-studio-class, .modal-event-page-detail,
    .news-faq-item, .news-price-info
) {
    color: var(--theme-text);
    border-color: #4c555c;
}

html[data-theme="dark"] #homeModal .news-faq-item {
    border-bottom-color: rgba(255, 255, 255, .2);
}

/* Timetable */
html[data-theme="dark"] .timetable-page,
html[data-theme="dark"] .timetable-wrapper {
    background: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="dark"] :is(
    .timetable-room-card, .timetable-room-summary, .timetable-class,
    .timetable-day:not(.active), .timetable-empty
) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #485057;
}

html[data-theme="dark"] .timetable-day:not(.is-unavailable):hover {
    background: var(--theme-surface-alt);
}

/* Prices */
html[data-theme="dark"] .prices-page {
    background: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="dark"] :is(
    .prices-area-explanation, .prices-table,
    .prices-table th, .prices-table td, .prices-info-row td
) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #4b5359;
}

html[data-theme="dark"] .prices-info-row td {
    background: var(--theme-surface-alt);
}

/* Signup catalogue and signup form */
html[data-theme="dark"] :is(.signup-section, .signup-catalog-page) {
    background: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="dark"] :is(
    .signup-catalog-style, .signup-catalog-classes, .signup-catalog-class,
    .signup-catalog-class-info, .signup-form-card, .signup-summary,
    .signup-identity-toggle, .price-option-content, .role-option span,
    .signup-document-dialog, .signup-document-content h3,
    .signup-document-content ul
) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #4b5359;
}

html[data-theme="dark"] .signup-catalog-class-image {
    background: var(--theme-surface-alt);
}

html[data-theme="dark"] :is(
    .signup-field input[type="text"], .signup-field input[type="email"],
    .signup-field input[type="tel"], .signup-field textarea,
    .signup-country-code
) {
    background: var(--theme-surface-alt);
    color: var(--theme-text);
    border-color: #626b72;
}

/* Rental and contact forms */
html[data-theme="dark"] :is(.rental-page, .contact-page, .about-page, .legal-page) {
    background: var(--theme-bg);
    color: var(--theme-text);
}

html[data-theme="dark"] :is(
    .rental-price-card, .room-floor-info, .calendar-box,
    .rental-calendar-free-slot, .calendar-placeholder, .rental-form,
    .contact-founders-image, .contact-item, .form-card,
    .about-instructors-coming-soon, .instructor-card,
    .instructor-modal-box, .about-founders-image
) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #4b5359;
}

html[data-theme="dark"] :is(
    .rental-field input, .rental-field select, .rental-field textarea,
    .input-group input, .input-group textarea
) {
    background: var(--theme-surface-alt);
    color: var(--theme-text);
    border-color: #626b72;
}

/* Legal documents, dialogs and shared modals */
html[data-theme="dark"] :is(
    .legal-document-content h3, .legal-document-content ul,
    .legal-version, .legal-version-item, .legal-compare-dialog,
    .legal-compare-content .diff_header, .modal-box,
    #classModal .event-cover-wrapper, #homeModal .modal-box
) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #4b5359;
}

html[data-theme="dark"] .legal-version-item:hover,
html[data-theme="dark"] .legal-version-item.is-selected {
    background: var(--theme-surface-alt);
}

html[data-theme="dark"] :is(.legal-diff-removed, .diff_sub) {
    background: #572d32;
}

html[data-theme="dark"] .diff_chg {
    background: #645a22;
}

/* Cookie dialogs */
html[data-theme="dark"] :is(
    .cookie-banner-content, .cookie-settings-dialog,
    .cookie-button-secondary
) {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #596168;
}

html[data-theme="dark"] .cookie-switch > span[aria-hidden="true"]::after {
    background: #e8ecef;
}

html[data-theme="dark"] :is(
    .timetable-page, .prices-page, .signup-section, .signup-catalog-page,
    .rental-page, .contact-page, .about-page, .legal-page
) :is(h1, h2, h3, h4, p, label, summary, strong) {
    color: inherit;
}

html[data-theme="dark"] .about-page :is(
    .about-label, .about-title h1, .about-mission h2,
    .about-mission .about-big-text, .about-mission .about-studio,
    .about-story-content h2, .about-highlight,
    .about-instructors-note-label, .about-founders-text h2
) {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .about-page :is(
    .about-title p, .about-mission p, .about-story-content p,
    .about-instructors-note, .instructor-card p, .about-founders-text p
) {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .site-footer .social-icons a {
    background: var(--sand);
    color: #111111;
}

html[data-theme="dark"] .site-footer .social-icons a:hover {
    background: var(--orange);
    color: #ffffff;
}

.map-box iframe {
    transition: filter .25s ease;
}

html[data-theme="dark"] .map-box iframe {
    filter: invert(92%) hue-rotate(180deg) brightness(.82) contrast(.9)
        saturate(.75);
}

.theme-toggle {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 50%;
    background: var(--theme-surface);
    color: var(--theme-text);
    font: 700 19px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease,
        transform .2s ease;
}

.theme-toggle:hover {
    color: var(--orange);
    border-color: var(--orange);
    transform: rotate(10deg);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.theme-toggle-light,
html[data-theme="dark"] .theme-toggle-dark {
    display: none;
}

html[data-theme="dark"] .theme-toggle-light {
    display: inline;
}

@media (max-width: 700px) {
    html[data-theme="dark"] .menu-toggle {
        color: #f7f7f7;
    }

    html[data-theme="dark"] .menu-toggle:hover,
    html[data-theme="dark"] .menu-toggle:focus-visible {
        color: #ffffff;
    }

    .theme-toggle {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }
}