/* === Vreldan — design tokens (Appointment Menu) === */
:root {
    --color-charcoal: #1A1F24;
    --color-charcoal-soft: #2E363E;
    --color-cobalt: #1F4B7A;
    --color-cobalt-hover: #183C62;
    --color-porcelain: #F5F7F9;
    --color-surface: #FFFFFF;
    --color-hairline: #D0D6DE;
    --color-mist: #E8EDF2;
    --color-text-secondary: #5A6570;
    --color-text-on-dark: #F5F7F9;
    --color-footer: #12171C;
    --color-error: #B42318;
    --color-success: #2F6B4F;
    --color-sponsored-bg: #E8EDF2;
    --color-sponsored-text: #4A5560;

    --font-display: "Literata", Georgia, "Times New Roman", serif;
    --font-ui: "Manrope", "Segoe UI", sans-serif;

    --radius: 4px;
    --header-height: 64px;

    --space-section-m: 64px;
    --space-section-d: 104px;

    --container-reading: 640px;
    --container-menu: 920px;
    --container-form: 440px;

    --hero-overlay: linear-gradient(
        105deg,
        rgba(18, 23, 28, 0.55) 0%,
        rgba(18, 23, 28, 0.28) 48%,
        rgba(18, 23, 28, 0.45) 100%
    );

    --transition-fast: 180ms ease;
    --shadow-focus: 0 0 0 3px rgba(31, 75, 122, 0.28);
}