:root {
    /* Basispalet — crème, warme diepzwarte inkt, beige accenten */
    --cream: #f5f1ea;
    --cream-2: #efeae1;
    --paper: #ffffff;
    --ink: #171310;
    --ink-2: #4a423a;
    --muted: #7c7268;
    --beige: #ebe4d8;
    --line: #e4dcd0;
    --line-soft: #efe9df;

    /* Semantische aliassen (gebruikt door bestaande pagina-CSS) */
    --color-background: var(--cream);
    --color-background-soft: var(--cream-2);
    --color-surface: var(--paper);
    --color-surface-soft: var(--beige);
    --color-text: var(--ink);
    --color-text-muted: var(--ink-2);
    --color-text-faded: var(--muted);
    --color-border: var(--line);
    --color-border-soft: var(--line-soft);
    --color-primary: var(--ink);
    --color-primary-hover: #2b241d;
    --color-primary-text: #fbf9f5;
    --color-accent: var(--ink);
    --color-accent-soft: var(--beige);
    --color-hero-overlay-strong: rgba(250, 248, 243, 0.98);
    --color-hero-overlay-medium: rgba(250, 248, 243, 0.84);
    --color-hero-overlay-light: rgba(250, 248, 243, 0.18);
    --color-card-background: var(--paper);
    --color-card-border: var(--line-soft);
    --color-card-border-hover: var(--line);
    --color-icon-background: var(--beige);
    --color-calendar-available: var(--beige);
    --color-calendar-selected: var(--ink);
    --color-calendar-selected-text: #fbf9f5;

    /* Typografie — Playfair Display voor koppen, Inter voor tekst */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-size-small: 0.75rem;
    --font-size-body: 1rem;
    --font-size-heading-small: 1.125rem;
    --font-size-heading-large: clamp(2.5rem, 5vw, 4rem);

    /* Layout */
    --container-site: 1220px;
    --container-booking: 1220px;
    --header-height: 82px;

    /* Afstanden */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Afrondingen */
    --radius-small: 14px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-arch: 96px;
    --radius-pill: 999px;

    /* Schaduwen en animatie */
    --shadow-card: 0 1px 2px rgba(23, 19, 16, 0.04), 0 10px 26px -20px rgba(23, 19, 16, 0.35);
    --shadow-card-hover: 0 1px 2px rgba(23, 19, 16, 0.04), 0 22px 48px -30px rgba(23, 19, 16, 0.4);
    --shadow-hero: 0 1px 2px rgba(23, 19, 16, 0.04), 0 22px 48px -30px rgba(23, 19, 16, 0.4);
    --transition-fast: 200ms ease;
}