/* Design tokens, theme foundations, and browser-level defaults */
:root {
    --font-sans: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.86rem;
    --font-size-md: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.2rem;
    --font-size-2xl: 1.45rem;

    --line-tight: 1.2;
    --line-normal: 1.45;
    --line-relaxed: 1.6;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    --container-max: 1240px;
    --container-padding: 1rem;
}

:root,
body.theme-dark {
    color-scheme: dark;

    --color-bg: #0f1117;
    --color-surface: #1e1f25;
    --color-surface-elevated: #242731;
    --color-surface-muted: #2b2d36;
    --color-field: #15171d;
    --color-border: #313440;
    --color-border-strong: #464a58;
    --color-text: #f2f3f5;
    --color-muted: #b5bac1;
    --color-heading: #ffffff;
    --color-primary: #5865f2;
    --color-primary-hover: #4752c4;
    --color-primary-soft: rgba(88, 101, 242, 0.18);
    --color-accent: #23a559;
    --color-success: #2ba777;
    --color-success-bg: rgba(43, 167, 119, 0.14);
    --color-error: #da4c62;
    --color-error-bg: rgba(218, 76, 98, 0.14);
    --color-warning: #f0b232;
    --color-warning-bg: rgba(240, 178, 50, 0.14);
    --color-button-text: #ffffff;
    --color-danger-hover: #b83b4f;
    --color-calendar-free-bg: rgba(43, 167, 119, 0.72);
    --color-calendar-free-text: #d9fbe8;
    --color-calendar-reserved-bg: rgba(218, 76, 98, 0.78);
    --color-calendar-reserved-text: #fff1f3;

    --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.32);
    --focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.34);
}

body.theme-light {
    color-scheme: light;

    --color-bg: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f1f5f9;
    --color-field: #ffffff;
    --color-border: #dbe3ef;
    --color-border-strong: #b8c4d8;
    --color-text: #172033;
    --color-muted: #5d6b82;
    --color-heading: #0f172a;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #dbeafe;
    --color-accent: #0f766e;
    --color-success: #15803d;
    --color-success-bg: #dcfce7;
    --color-error: #dc2626;
    --color-error-bg: #fee2e2;
    --color-warning: #a16207;
    --color-warning-bg: #fef3c7;
    --color-button-text: #ffffff;
    --color-danger-hover: #b91c1c;
    --color-calendar-free-bg: #86efac;
    --color-calendar-free-text: #052e16;
    --color-calendar-reserved-bg: #dc2626;
    --color-calendar-reserved-text: #ffffff;

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--color-bg);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-normal);
    text-rendering: optimizeLegibility;
}

a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-primary-hover);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: var(--color-primary-soft);
    color: var(--color-heading);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}