:root {
    --color-primary: #2d3c55;
    --color-secondary: #395e81;
    --color-background: #f7f7f7;
    --color-surface: #ebebeb;
    --color-text-primary: #000000;
    --color-text-secondary: #4a4a4a;
    --color-accent: #4c79c2;
    --color-border: #355f90;
    --color-button-bg: #46556d;
    --color-button-text: #f9fafb;
}

body {
    background: var(--color-background);
    color: var(--color-text-primary);
}

.bg-brand-primary {
    background-color: var(--color-primary);
}

.bg-brand-secondary {
    background-color: var(--color-secondary);
}

.bg-brand-surface {
    background-color: var(--color-surface);
}

.text-brand-primary {
    color: var(--color-text-primary);
}

.text-brand-secondary {
    color: var(--color-text-secondary);
}

.text-brand-accent {
    color: var(--color-accent);
}

.border-brand {
    border-color: var(--color-border);
}

.btn-brand {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
}

.btn-brand:hover {
    filter: brightness(0.92);
}

.card-brand {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.section-soft {
    background:
        radial-gradient(circle at top left, rgba(76, 121, 194, 0.12), transparent 35%),
        var(--color-background);
}

.time-slot.is-selected {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border-color: var(--color-button-bg);
}