:root {

    /* Kleuren */

    /* Colors */

    /* Black, white and grey tones */
    --black: #000000;
    --grey-dark: #333333;
    --grey-medium: #555555;
    --grey-light: #e6e6e6;
    --grey-extra-light: #f9fafb;
    --white: #ffffff;

    /* Accent colors */
    --primary-color: #009de1;
    --primary-color-dark: #0076B6;
    --secondary-color: #FAB725;
    --secondary-color-dark: #F0A505;
    --purple-color: #7d4efc;
    --purple-color-dark: #6633cc;
    --approve-color: #D1F8DC;
    --approve-color-dark: #2f8f5b;
    
    --danger-color: #fdaeae;
    --danger-color-dark: #e55c6a;
    --light-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --background-light-color: #fff;
    --background-dark-color: #000;

    /* Badge colors */
    --badge-pending: #f2f2f2;
    --badge-pending-text: #555;
    --badge-processing: #fff5cc;
    --badge-processing-text: #b58900;
    --badge-subcomplete: #EBF9FF;
    --badge-subcomplete-text: #009de1;
    --badge-complete: #d1f8dc;
    --badge-complete-text: #2f8f5b;
    --badge-error: #f8d1d1;
    --badge-error-text: #dc3545;

    /* Transparent white variations */
    --white-90: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-20: rgba(255, 255, 255, 0.2);

    /* Fonts */
    --font-family: 'Work Sans', sans-serif;
    --font-size-xxsmall: 0.25rem;
    --font-size-extra-small: 0.75rem;
    --font-size-small: 0.85rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;
    --font-size-xxlarge: 2rem;
    --font-size-xxxlarge: 2.5rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;    


    /* sizes  */
    --size-navbar: 4.375rem;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;

    /* Border radius */
    --border-radius-normal: 12px;
    --border-radius-small: 8px;
    --border-radius-extra-small: 4px;
}

/* Dark Mode Theme */
[data-theme="dark"] {
    /* Black, white and grey tones - inverted */
    --black: #ffffff;
    --grey-dark: #e0e0e0;
    --grey-medium: #b0b0b0;
    --grey-light: #3a3a3a;
    --grey-extra-light: #252525;
    --white: #1e1e1e;

    /* Background colors */
    --light-color: #252525;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --background-light-color: #1e1e1e;
    --background-dark-color: #ffffff;

    /* Accent colors - adjusted for dark mode */
    --approve-color: #1a3d24;
    --approve-color-dark: #5cc97a;

    /* Badge colors - adjusted for dark mode */
    --badge-pending: #2d2d2d;
    --badge-pending-text: #b0b0b0;
    --badge-processing: #3d3520;
    --badge-processing-text: #f5d86e;
    --badge-subcomplete: #1a2d35;
    --badge-subcomplete-text: #4db8e8;
    --badge-complete: #1a2d20;
    --badge-complete-text: #5cc97a;
    --badge-error: #3d1a1a;
    --badge-error-text: #f5a5a5;

    /* Transparent white variations - inverted for dark mode */
    --white-90: rgba(30, 30, 30, 0.95);
    --white-80: rgba(30, 30, 30, 0.8);
    --white-20: rgba(30, 30, 30, 0.2);
}