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

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

    /* Background (C, D, E) */
    --color-background: #f7f8f7;
    --color-background-light: #fcfdfc;
    --color-background-dark: #eff1ef;

    /* 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: #273528;
    --color-text-light: #5b715d;

    /* Border (I, J) */
    --color-border: #c2ccc3;
    --color-border-light: #dce0dc;

    /* Button (N, O, P) */
    --color-text-button: #ffffff;
    --color-button: #417146;
    --color-button-hover: #305934;

    /* 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: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, 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: #727b73;
    --color-footer-accent: #e2e9e3;
    --color-footer-text: #dce0dc;

    /* Webshop-scoped kleuren (alleen publieke webshop, tekst kantelt mee) */
    --shop-bg: #f7f8f7;
    --shop-tile: #fcfdfc;
    --shop-text: #273528;
    --shop-card-text: #29472c;
    --shop-card-muted: #5b715d;
    --shop-highlight: #29472c;
    --shop-button-soft: rgba(65, 113, 70, 0.45);

    /* Fonts */
    --font-heading: Georgia, 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, 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;
}