:root {
    --font-sans: "Geist Sans Local", "Segoe UI Variable", "Segoe UI", sans-serif;
    --font-mono: "Geist Mono Local", "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

    --color-canvas: #f5f8f6;
    --color-canvas-strong: #e7f1ec;
    --color-surface: #ffffff;
    --color-surface-muted: #f2f7f5;
    --color-text: #111816;
    --color-muted: #5f6f6c;
    --color-line: #d6e3df;
    --color-brand-700: #075e55;
    --color-brand-600: #0f766e;
    --color-brand-100: #dff7f1;
    --color-info-600: #2563eb;
    --color-info-100: #e7efff;
    --color-success-700: #17633d;
    --color-success-100: #e5f6ec;
    --color-warning-800: #73510a;
    --color-warning-100: #fff6df;
    --color-danger-700: #ba2f27;
    --color-danger-100: #fee7e4;

    --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;
    --radius-sm: 8px;
    --radius-control: 12px;
    --radius-panel: 20px;
    --radius-shell: 28px;
    --radius-pill: 999px;
    --shadow-panel: 0 18px 48px rgba(22, 46, 42, 0.09);
    --shadow-floating: 0 24px 70px rgba(15, 64, 51, 0.13);
    --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.24);
    --motion-fast: 180ms;
    --motion-view: 320ms;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --z-sticky: 20;
    --z-popover: 50;
    --z-dialog: 100;

    /* Compatibele namen voor de bestaande pagina-CSS. */
    --bg: var(--color-canvas);
    --bg-strong: var(--color-canvas-strong);
    --surface: rgba(255, 255, 255, 0.94);
    --surface-solid: var(--color-surface);
    --surface-muted: var(--color-surface-muted);
    --text: var(--color-text);
    --muted: var(--color-muted);
    --line: var(--color-line);
    --border: var(--color-line);
    --accent: var(--color-brand-600);
    --accent-strong: var(--color-brand-700);
    --accent-soft: var(--color-brand-100);
    --danger: var(--color-danger-700);
    --danger-soft: var(--color-danger-100);
    --success-soft: var(--color-success-100);
    --success-text: var(--color-success-700);
    --warning-bg: var(--color-warning-100);
    --warning-text: var(--color-warning-800);
    --shadow: var(--shadow-floating);
    --panel-shadow: var(--shadow-panel);
    --spring: var(--ease-standard);
    --radius-xl: var(--radius-panel);
    --radius-lg: 16px;
    --radius-md: var(--radius-control);
}