body[class*="drecha-events-template-"] {
    --drecha-public-accent: #1454a3;
    --drecha-public-accent-soft: #eef5ff;
    --drecha-public-field: #fff;
    --drecha-public-ink: #1f2937;
    --drecha-public-line: #d7e0ec;
    --drecha-public-muted: #526078;
    --drecha-public-padding: clamp(14px, 2.5vw, 20px);
    --drecha-public-shadow: 0 8px 24px rgba(23, 32, 44, .08);
    --drecha-public-surface: #fff;
    --drecha-public-text-size: 1rem;
}

body.drecha-events-template-readable {
    --drecha-public-accent: #174ea6;
    --drecha-public-accent-soft: #edf4ff;
    --drecha-public-padding: clamp(20px, 3.5vw, 30px);
    --drecha-public-shadow: 0 10px 30px rgba(23, 32, 44, .1);
    --drecha-public-text-size: 1.125rem;
}

body.drecha-events-template-warm {
    --drecha-public-accent: #b94719;
    --drecha-public-accent-soft: #fff0e5;
    --drecha-public-field: #fffdf9;
    --drecha-public-ink: #3d281d;
    --drecha-public-line: #e7cdbb;
    --drecha-public-muted: #765a49;
    --drecha-public-shadow: 0 10px 28px rgba(103, 58, 31, .1);
    --drecha-public-surface: #fffaf4;
}

body.drecha-events-template-midnight {
    --drecha-public-accent: #70b7ff;
    --drecha-public-accent-soft: #173352;
    --drecha-public-field: #13263d;
    --drecha-public-ink: #f4f8fc;
    --drecha-public-line: #38526d;
    --drecha-public-muted: #b7c8d9;
    --drecha-public-shadow: 0 12px 32px rgba(5, 15, 28, .28);
    --drecha-public-surface: #0d2035;
}

body[class*="drecha-events-template-"] :is(
    .drecha-events-app,
    .drecha-component,
    .drecha-booking-panel,
    .drecha-appointments,
    .drecha-customer-account,
    .drecha-public-output
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-block: 1rem;
    border: 1px solid var(--drecha-public-line);
    border-radius: 4px;
    padding: var(--drecha-public-padding);
    background: var(--drecha-public-surface);
    box-shadow: var(--drecha-public-shadow);
    color: var(--drecha-public-ink);
    font-size: var(--drecha-public-text-size);
}

body[class*="drecha-events-template-"] :is(
    .drecha-events-app,
    .drecha-component,
    .drecha-booking-panel,
    .drecha-appointments,
    .drecha-customer-account,
    .drecha-public-output
) {
    --drecha-accent: var(--drecha-public-accent);
    --drecha-blue: var(--drecha-public-accent);
    --drecha-customer-accent: var(--drecha-public-accent);
    --drecha-customer-border: var(--drecha-public-line);
    --drecha-customer-ink: var(--drecha-public-ink);
    --drecha-customer-muted: var(--drecha-public-muted);
    --drecha-ink: var(--drecha-public-ink);
    --drecha-line: var(--drecha-public-line);
    --drecha-muted: var(--drecha-public-muted);
    --drecha-soft: var(--drecha-public-accent-soft);
    --drecha-surface: var(--drecha-public-surface);
    --drecha-wash: var(--drecha-public-accent-soft);
}

body[class*="drecha-events-template-"] .drecha-component .drecha-component,
body[class*="drecha-events-template-"] .drecha-component :is(
    .drecha-events-app,
    .drecha-booking-panel,
    .drecha-appointments,
    .drecha-customer-account,
    .drecha-public-output
) {
    width: auto;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body[class*="drecha-events-template-"] :is(
    .drecha-events-app,
    .drecha-component,
    .drecha-booking-panel,
    .drecha-appointments,
    .drecha-customer-account,
    .drecha-public-output,
    .drecha-waitlist
) :where(h1, h2, h3, h4, p, ul, ol, dl) {
    margin-block-start: 0;
}

body[class*="drecha-events-template-"] :is(
    .drecha-events-app,
    .drecha-component,
    .drecha-booking-panel,
    .drecha-appointments,
    .drecha-customer-account,
    .drecha-public-output
) :where(p, li, dd, label, small) {
    line-height: 1.5;
}

body[class*="drecha-events-template-"] :is(
    .drecha-events-app,
    .drecha-component,
    .drecha-booking-panel,
    .drecha-appointments,
    .drecha-customer-account,
    .drecha-public-output
) a:not(.drecha-button, .drecha-online-event-link) {
    color: var(--drecha-public-accent);
}

body[class*="drecha-events-template-"] :is(
    .drecha-event-card,
    .drecha-event-row,
    .drecha-events-list,
    .drecha-service-card,
    .drecha-profile-card,
    .drecha-customer-card,
    .drecha-customer-header,
    .drecha-customer-booking,
    .drecha-waitlist,
    .drecha-events-filter-panel
) {
    border-color: var(--drecha-public-line);
    background: var(--drecha-public-surface);
    color: var(--drecha-public-ink);
}

body[class*="drecha-events-template-"] :is(
    .drecha-events-views a:is(:hover, .is-active),
    .drecha-calendar-cell a,
    .drecha-calendar-heading a,
    .drecha-event-row-action a,
    .drecha-events-empty,
    .drecha-availability-panel,
    .drecha-customer-header,
    .drecha-customer-status
) {
    border-color: var(--drecha-public-line);
    background: var(--drecha-public-accent-soft);
    color: var(--drecha-public-ink);
}

body[class*="drecha-events-template-"] :is(
    .drecha-booking-form,
    .drecha-appointment-form,
    .drecha-appointment-reschedule,
    .drecha-customer-form,
    .drecha-waitlist-form,
    .drecha-events-filters,
    .drecha-events-quick-search
) :is(input, select, textarea) {
    border-color: var(--drecha-public-line);
    background: var(--drecha-public-field);
    color: var(--drecha-public-ink);
}

body[class*="drecha-events-template-"] :is(
    .drecha-booking-form,
    .drecha-booking-panel form,
    .drecha-appointment-form,
    .drecha-appointment-manage,
    .drecha-customer-form,
    .drecha-customer-card #loginform,
    .drecha-waitlist-form
) button,
body[class*="drecha-events-template-"] :is(.drecha-button, .drecha-online-event-link) {
    border-color: var(--drecha-public-accent);
    background: var(--drecha-public-accent);
    color: #fff;
}

body.drecha-events-template-midnight :is(
    .drecha-booking-form,
    .drecha-booking-panel form,
    .drecha-appointment-form,
    .drecha-appointment-manage,
    .drecha-customer-form,
    .drecha-customer-card #loginform,
    .drecha-waitlist-form
) button,
body.drecha-events-template-midnight :is(.drecha-button, .drecha-online-event-link) {
    color: #071526;
}

body.drecha-events-template-midnight :is(
    .drecha-events-filter-open,
    .drecha-events-quick-search button,
    .drecha-events-filters footer button
) {
    color: #071526;
}

body.drecha-events-template-readable :is(
    .drecha-booking-form,
    .drecha-appointment-form,
    .drecha-customer-form,
    .drecha-waitlist-form
) :is(input, select, textarea, button) {
    min-height: 3rem;
    font-size: 1em;
}

@media (max-width: 640px) {
    body[class*="drecha-events-template-"] :is(
        .drecha-events-app,
        .drecha-component,
        .drecha-booking-panel,
        .drecha-appointments,
        .drecha-customer-account,
        .drecha-public-output
    ) {
        padding: 14px;
    }
}

@media (forced-colors: active) {
    body[class*="drecha-events-template-"] :is(
        .drecha-events-app,
        .drecha-component,
        .drecha-booking-panel,
        .drecha-appointments,
        .drecha-customer-account,
        .drecha-public-output
    ) {
        border-color: CanvasText;
        box-shadow: none;
    }
}