:root {
    --cal-bg-emphasis: #2a2a3a !important;
    --cal-bg: #1F1F2C !important;
    --cal-bg-subtle: #272736 !important;
    --cal-bg-muted: #12121A !important;
    --cal-bg-inverted: #e6e7eb !important;
    --cal-bg-info: #35478C !important;
    --cal-bg-success: #3A5936 !important;
    --cal-bg-attention: #8A4931 !important;
    --cal-bg-error: #993939 !important;
    --cal-bg-dark-error: #993939 !important;
    --cal-border-emphasis: #3e3e4f !important;
    --cal-border: #2e2e3e !important;
    --cal-border-subtle: #23232f !important;
    --cal-border-booker: #23232f !important;
    --cal-border-muted: #272736 !important;
    --cal-border-error: #b3473a !important;
    --cal-border-focus: #ffffff !important;
    --cal-text-emphasis: #f5f5fa !important;
    --cal-text: #d1d1e0 !important;
    --cal-text-subtle: #a7a7b8 !important;
    --cal-text-muted: #6a6a75 !important;
    --cal-text-inverted: #1F1F2C !important;
    --cal-text-info: #cfd7f2 !important;
    --cal-text-success: #d7f2dc !important;
    --cal-text-attention: #f2ded7 !important;
    --cal-text-error: #f9e3e1 !important;
    --cal-brand: #f5f5fa !important;
    --cal-brand-emphasis: #b8bac3 !important;
    --cal-brand-text: #1F1F2C !important;
}

/* Specific Component Styling */
#booker-container {
    display: grid !important;
    grid-template-areas: "meta main timeslots" "meta main timeslots" !important;
    width: calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width)) !important;
    grid-template-columns: var(--booker-meta-width) 1fr var(--booker-timeslots-width) !important;
    grid-template-rows: 1fr 0fr !important;
    min-height: 450px !important;
    height: auto !important;
    background-color: var(--cal-bg) !important;
    border: 1px solid var(--cal-border) !important;
    border-radius: 8px !important; /* Optional: To add some rounding to the container */
}

#overlayCalendar {
    background-color: var(--cal-bg-emphasis) !important;
}

#overlayCalendar span {
    background-color: var(--cal-bg-inverted) !important;
}

.text-emphasis {
    color: var(--cal-text-emphasis) !important;
}

.text-subtle {
    color: var(--cal-text-subtle) !important;
}

.text-default {
    color: var(--cal-text) !important;
}

.border-subtle {
    border-color: var(--cal-border-subtle) !important;
}

.bg-emphasis {
    background-color: var(--cal-bg-emphasis) !important;
}

.bg-default {
    background-color: var(--cal-bg) !important;
}

.bg-muted {
    background-color: var(--cal-bg-muted) !important;
}

/* Additional classes for buttons, icons, etc. */
button[data-state="closed"] {
    background-color: var(--cal-bg-muted) !important;
    color: var(--cal-text) !important;
}

button[data-state="closed"]:hover {
    color: var(--cal-text-emphasis) !important;
}

button[data-state="on"] {
    background-color: var(--cal-bg-emphasis) !important;
    color: var(--cal-text-emphasis) !important;
}

header {
    background-color: var(--cal-bg) !important;
}

header button {
    color: var(--cal-text) !important;
}

header button:hover {
    color: var(--cal-text-emphasis) !important;
    background-color: var(--cal-bg-muted) !important;
}