:root {
    /* Basiskleuren - alles hier aanpassen voor andere look & feel */
    --color-bg: #f5f5f7;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-hover: #f3f4f6;

    --color-accent: #F38F00;
    --color-accent-rgb: 243, 143, 0;
    --color-accent-soft: rgba(var(--color-accent-rgb), 0.12);
    --color-accent-alt: #F38F00;
    --color-accent-alt-rgb: 243, 143, 0;

    --color-border-subtle: #e5e7eb;
    --color-border-strong: #d1d5db;

    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-text-soft: #9ca3af;

    --color-danger: #ef4444;
    --color-danger-soft: rgba(239, 68, 68, 0.08);
    --color-danger-strong: #b91c1c;
    --color-danger-bg: #fee2e2;

    --color-success: #22c55e;
    --color-success-soft: rgba(34, 197, 94, 0.12);

    --color-warning: #f97316;
    --color-warning-soft: rgba(249, 115, 22, 0.12);

    /* Typografie */
    --font-sans: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 15px;
    --font-size-small: 13px;
    --font-size-xsmall: 11px;

    /* Randen & schaduw */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
    --shadow-subtle: 0 10px 30px rgba(15, 23, 42, 0.08);

    /* Overig */
    --sidebar-width: 270px;

    /* Breakpoints (voor reference in media queries: 768px, 480px) */
    --bp-tablet: 768px;
    --bp-mobile: 480px;
}