:root {
    /* Brand/Accent (A, B) */
    --color-accent: #29472c;
    --color-accent-light: #ebe3d4;

    /* Text Accent (F) */
    --color-text-accent: #29472c;

    /* Background (C, D, E) */
    --color-background: #f6f1e8;
    --color-background-light: #fffdf9;
    --color-background-dark: #ebe3d4;

    /* Surface (kaart-achtergrond, los van tenant-thema voor card-contrast).
       Hardcoded wit zodat .hero-card / .customer-list-card / shop-bestellingen
       een herkenbaar "lift"-niveau houden op elke tenant-achtergrond. */
    --color-surface: #ffffff;

    /* Text (G, H) */
    --color-text: #2b2a26;
    --color-text-light: #5c5850;

    /* Border (I, J) */
    --color-border: #d9cfbd;
    --color-border-light: #ebe3d4;

    /* Button (N, O, P) */
    --color-text-button: #ffffff;
    --color-button: #29472c;
    --color-button-hover: #1f3822;

    /* Status (K, L, M) */
    --color-success: #6b8e5a;
    --color-warning: #d4a574;
    --color-error: #c17a6b;

    /* Warning-callout pair (vaste semantiek, los van het accent) */
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;

    /* Status dark variants (derived) */
    --color-success-dark: #5a784c;
    --color-warning-dark: #b48c62;
    --color-danger-dark: #a4675a;

    /* Typography */
    --font-family: 'Inter', system-ui, sans-serif;

    /* Derived (berekend uit accent) */
    --color-shadow: rgba(41, 71, 44, 0.08);
    --color-hover-tint: rgba(41, 71, 44, 0.06);

    /* Derived tint colors (webshop + backoffice) */
    --color-accent-light-bg: rgba(41, 71, 44, 0.08);
    --color-accent-border: rgba(41, 71, 44, 0.25);
    --color-error-light-bg: rgba(193, 122, 107, 0.06);
    --color-success-light-bg: rgba(107, 142, 90, 0.08);

    /* Footer (derived) */
    --color-footer-bg: #757471;
    --color-footer-accent: #ebe3d4;
    --color-footer-text: #ebe3d4;

    /* Webshop-scoped kleuren (alleen publieke webshop, tekst kantelt mee) */
    --shop-bg: #f6f1e8;
    --shop-tile: #fffdf9;
    --shop-text: #2b2a26;
    --shop-card-text: #29472c;
    --shop-card-muted: #5c5850;
    --shop-highlight: #c8a45c;
    --shop-button-soft: rgba(41, 71, 44, 0.45);

    /* Fonts */
    --font-heading: Fraunces, Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-ui: 'Inter', sans-serif;

    /* Layout */
    --layout-sidebar-width: 240px;
    --layout-max-content-width: 1200px;
    --layout-mobile-header-height: 52px;

    /* Radius (4/6/8/10 ladder na consolidatie 2026-05-14, plus radio-uitzondering 50%) */
    --radius: 10px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 10px;
    --radius-pill: 20px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Spacing (8px schaal) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
}