/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Font
# Color
    - Basic
    - Theme

    - Grey          Neutrals
    - Red           Error
    - Orange
    - Yellow        Warning
    - Lime
    - Green         Success
    - Teal
    - Turquoise     Theme
    - Aqua
    - Blue          Info
    - Ultramarine
    - Purple
    - Pink
# Size
# Spacing
# Border radius
# Transition
# Shadow

--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Font
--------------------------------------------------------------*/
:root {
    --system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    /* Fallback fonts toegevoegd voor betere font rendering bij laadproblemen */
    --sans-serif: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --serif: "Merriweather", "Georgia", "Times New Roman", Times, serif;
}


/*--------------------------------------------------------------
# Color (from https://design.gs.com/foundation/color-system/all-hues-and-values)
--------------------------------------------------------------*/
:root {
    --basic-white: #FFF;
    --basic-black: #000;

    --background:var(--basic-white);

    --theme-010:#EBF3F7;
    --theme-020:#C9E7F5;
    --theme-030:#8BD3F7;
    --theme-040:#48B8F0;
    --theme-050:#1195D6;
    --theme-060:#0073BA;
    --theme-070:#08548A;
    --theme-080:#0E3D66;
    --theme-090:#0C2B45;
    --theme-100:#0B1724;
}

:root {
    --grey-010:#F2F5F7;
    --grey-020:#DCE3E8;
    --grey-030:#C1CCD6;
    --grey-040:#9FB1BD;
    --grey-050:#7A909E;
    --grey-060:#5B7282;
    --grey-070:#3E5463;
    --grey-080:#2A3F4D;
    --grey-090:#1C2B36;
    --grey-100:#0E171F;

    --brown-010:#FAF8F4;
    --brown-020:#F0E8D9;
    --brown-030:#E0D0B3;
    --brown-040:#C7B08A;
    --brown-050:#A68955;
    --brown-060:#826830;
    --brown-070:#6B5228;
    --brown-080:#632B17;
    --brown-090:#402117;
    --brown-100:#1F1410;

    --red-010:#FCF3F2;
    --red-020:#FADCD9;
    --red-030:#FABBB4;
    --red-040:#FC9086;
    --red-050:#FA5343;
    --red-060:#D91F11;
    --red-070:#A1160A;
    --red-080:#75160C;
    --red-090:#4F150F;
    --red-100:#24120C;

    --orange-010:#FCF2EB;
    --orange-020:#FCDDC7;
    --orange-030:#FCBC97;
    --orange-040:#FC9162;
    --orange-050:#E86427;
    --orange-060:#BF4815;
    --orange-070:#8F3415;
    --orange-080:#632B17;
    --orange-090:#402117;
    --orange-100:#1F1410;
    
    --yellow-010:#FAF6CF;
    --yellow-020:#F7E379;
    --yellow-030:#F5C518;
    --yellow-040:#D9A514;
    --yellow-050:#B3870E;
    --yellow-060:#946613;
    --yellow-070:#70491C;
    --yellow-080:#54341F;
    --yellow-090:#38251B;
    --yellow-100:#1C1613;

    --lime-010:#EBF7DA;
    --lime-020:#D5F0B1;
    --lime-030:#AAD971;
    --lime-040:#78BF39;
    --lime-050:#52A31D;
    --lime-060:#3C7D0E;
    --lime-070:#2E5C0E;
    --lime-080:#254211;
    --lime-090:#1C2E10;
    --lime-100:#121A0D;

    --green-010:#EBF7ED;
    --green-020:#C7EBD1;
    --green-030:#88DBA8;
    --green-040:#43C478;
    --green-050:#16A163;
    --green-060:#077D55;
    --green-070:#075E45;
    --green-080:#094536;
    --green-090:#092E25;
    --green-100:#081A15;

    --teal-010:#EBF5F4;
    --teal-020:#BEEBE7;
    --teal-030:#86D9D4;
    --teal-040:#4EBFB9;
    --teal-050:#279C9C;
    --teal-060:#167B7D;
    --teal-070:#155C5E;
    --teal-080:#124241;
    --teal-090:#102E2D;
    --teal-100:#0C1A19;

    --turquoise-010:#EBF5F4;
    --turquoise-020:#C7E8ED;
    --turquoise-030:#81D8E6;
    --turquoise-040:#45BCD1;
    --turquoise-050:#159AB3;
    --turquoise-060:#067A91;
    --turquoise-070:#09596B;
    --turquoise-080:#0C424D;
    --turquoise-090:#102D33;
    --turquoise-100:#0F181A;

    --aqua-010:#EBF3F7;
    --aqua-020:#C9E7F5;
    --aqua-030:#8BD3F7;
    --aqua-040:#48B8F0;
    --aqua-050:#1195D6;
    --aqua-060:#0073BA;
    --aqua-070:#08548A;
    --aqua-080:#0E3D66;
    --aqua-090:#0C2B45;
    --aqua-100:#0B1724;

    --blue-010:#F0F4FA;
    --blue-020:#D4E4FA;
    --blue-030:#ADCCF7;
    --blue-040:#75B1FF;
    --blue-050:#3D8DF5;
    --blue-060:#186ADE;
    --blue-070:#0D4EA6;
    --blue-080:#103A75;
    --blue-090:#11294D;
    --blue-100:#0D1826;

    --ultramarine-010:#F2F3FA;
    --ultramarine-020:#DEE0FA;
    --ultramarine-030:#C2C7FC;
    --ultramarine-040:#A0A7FA;
    --ultramarine-050:#7681FC;
    --ultramarine-060:#545FE8;
    --ultramarine-070:#3A45B0;
    --ultramarine-080:#2F337D;
    --ultramarine-090:#23254D;
    --ultramarine-100:#141429;

    --purple-010:#F7F2FC;
    --purple-020:#EADCFC;
    --purple-030:#DABEFA;
    --purple-040:#C89AFC;
    --purple-050:#AC71F0;
    --purple-060:#8F49DE;
    --purple-070:#6B30AB;
    --purple-080:#4C277D;
    --purple-090:#331F4D;
    --purple-100:#1C1229;

    --pink-010:#FCF0F8;
    --pink-020:#F7DAED;
    --pink-030:#F7B7E2;
    --pink-040:#FA87D4;
    --pink-050:#ED4CB7;
    --pink-060:#CC1D92;
    --pink-070:#961574;
    --pink-080:#6B155A;
    --pink-090:#47153F;
    --pink-100:#241020;
}


/*--------------------------------------------------------------
# Size
--------------------------------------------------------------*/
:root {
    --wp--preset--font-size--small: var(--size-14);
    --wp--preset--font-size--medium: var(--size-16);
    --wp--preset--font-size--large: var(--size-30);
    --wp--preset--font-size--x-large: var(--size-48);
}


:root {
    --size-10: 0.625em;      /* XXS */
    --size-12: 0.75em;       /* XS */
    --size-14: 0.875em;      /* S */
    --size-16: 1em;          /* M */
    --size-18: 1.125em;      /* L */
    --size-20: 1.25em;       /* XL */
    --size-24: 1.5em;        /* XXL */
    --size-30: 1.875em;
    --size-36: 2.25em;
    --size-48: 3em;
    --size-60: 3.75em;
    --size-72: 4.5em;

    /* Responsive heading sizes */
    --responsive-h3: var(--size-24);
}


/*--------------------------------------------------------------
# Spacing
--------------------------------------------------------------*/
:root {
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 6rem;
    --space-6xl: 7rem;

}
    

/*--------------------------------------------------------------
# Border radius
--------------------------------------------------------------*/
:root {
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-50: 50%;
}   


/*--------------------------------------------------------------
# Transition
--------------------------------------------------------------*/
:root {
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/*--------------------------------------------------------------
# Shadow
--------------------------------------------------------------*/
:root {
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}



/*--------------------------------------------------------------
# Dark mode overwrites
--------------------------------------------------------------*/
body.dark-mode {
    /* Basis kleuren omkeren */
    --basic-white: #000; /* was wit, nu donkerste grijs */
    --basic-black: #fff; /* was zwart, nu lichtste grijs */
    
    --background: var(--basic-white); /* #0B1724; wijkt af -> of theme-100 */

    /* Tekst kleuren */
    --grey-010: #0E171F; 
    --grey-020: #1C2B36;
    --grey-030: #2A3F4D;
    --grey-040: #3E5463;
    --grey-050: #5B7282;
    --grey-060: #7A909E;
    --grey-070: #9FB1BD;
    --grey-080: #C1CCD6;
    --grey-090: #DCE3E8;
    --grey-100: #F2F5F7;

    --brown-010:#1F1410;
    --brown-020:#402117;
    --brown-030:#632B17;
    --brown-040:#826830;
    --brown-050:#8A6E35;
    --brown-060:#A68955;
    --brown-070:#C7B08A;
    --brown-080:#E0D0B3;
    --brown-090:#F0E8D9;
    --brown-100:#FAF8F4;
    
    --theme-010:#0B1724;
    --theme-020:#0C2B45;
    --theme-030:#0E3D66;
    --theme-040:#08548A;
    --theme-050:#0073BA;
    --theme-060:#1195D6;
    --theme-070:#48B8F0;
    --theme-080:#8BD3F7;
    --theme-090:#C9E7F5;
    --theme-100:#EBF3F7;

    --red-010:#24120C;
    --red-020:#4F150F;
    --red-030:#75160C;
    --red-040:#A1160A;
    --red-050:#D91F11;
    --red-060:#FA5343;
    --red-070:#FC9086;
    --red-080:#FABBB4;
    --red-090:#FADCD9;
    --red-100:#FCF3F2;

    --orange-010:#1F1410;
    --orange-020:#402117;
    --orange-030:#632B17;
    --orange-040:#8F3415;
    --orange-050:#BF4815;
    --orange-060:#E86427;
    --orange-070:#FC9162;
    --orange-080:#FCBC97;
    --orange-090:#FCDDC7;
    --orange-100:#FCf2EB;

    --yellow-010:#1c1613;
    --yellow-020:#38251b;
    --yellow-030:#54341f;
    --yellow-040:#70491c;
    --yellow-050:#946613;
    --yellow-060:#B3870E;
    --yellow-070:#D9A514;
    --yellow-080:#F5C518;
    --yellow-090:#F7E379;
    --yellow-100:#FAF6CF;

    --lime-010:#121A0D;
    --lime-020:#1C2E10;
    --lime-030:#254211;
    --lime-040:#2E5C0E;
    --lime-050:#3C7D0E;
    --lime-060:#52a31d;
    --lime-070:#78bf39;
    --lime-080:#aad971;
    --lime-090:#d5f0b1;
    --lime-100:#ebf7da;

    --green-010:#081a15;
    --green-020:#092e25;
    --green-030:#094536;
    --green-040:#075e45;
    --green-050:#077d55;
    --green-060:#16A163;
    --green-070:#43C478;
    --green-080:#88DBA8;
    --green-090:#C7EBD1;
    --green-100:#EBF7ED;

    --teal-010:#0C1A19;
    --teal-020:#102E2D;
    --teal-030:#124241;
    --teal-040:#155C5E;
    --teal-050:#167b7d;
    --teal-060:#279c9c;
    --teal-070:#4ebfb9;
    --teal-080:#86d9d4;
    --teal-090:#beebe7;
    --teal-100:#ebf5f4;

    --turquoise-010:#102d33;
    --turquoise-020:#102d33;
    --turquoise-030:#0c424d;
    --turquoise-040:#09596b;
    --turquoise-050:#067a91;
    --turquoise-060:#159ab3;
    --turquoise-070:#45bcd1;
    --turquoise-080:#81d8e6;
    --turquoise-090:#c7e8ed;
    --turquoise-100:#ebf5f4;

    --aqua-010:#0b1724;
    --aqua-020:#0c2b45;
    --aqua-030:#0e3d66;
    --aqua-040:#08548a;
    --aqua-050:#0073ba;
    --aqua-060:#1195d6;
    --aqua-070:#48b8f0;
    --aqua-080:#8bd3f7;
    --aqua-090:#c9e7f5;
    --aqua-100:#ebf3f7;

    --blue-010:#0b1724;
    --blue-020:#0c2b45;
    --blue-030:#0e3d66;
    --blue-040:#08548a;
    --blue-050:#0073ba;
    --blue-060:#3D8DF5;
    --blue-070:#75B1FF;
    --blue-080:#ADCCF7;
    --blue-090:#D4E4FA;
    --blue-100:#F0F4FA;

    --ultramarine-010:#141429;
    --ultramarine-020:#23254d;
    --ultramarine-030:#2f337d;
    --ultramarine-040:#3a45b0;
    --ultramarine-050:#545fe8;
    --ultramarine-060:#7681fc;
    --ultramarine-070:#a0a7fa;
    --ultramarine-080:#c2c7fc;
    --ultramarine-090:#dee0fa;
    --ultramarine-100:#f2f3fa;

    --purple-010:#1c1229;
    --purple-020:#331f4d;
    --purple-030:#4c277d;
    --purple-040:#6b30ab;
    --purple-050:#8f49de;
    --purple-060:#ac71f0;
    --purple-070:#c89afc;
    --purple-080:#dabefa;
    --purple-090:#eadcfc;
    --purple-100:#f7f2fc;

    --pink-010:#241020;
    --pink-020:#47153f;
    --pink-030:#961574;
    --pink-040:#961574;
    --pink-050:#cc1d92;
    --pink-060:#ed4cb7;
    --pink-070:#fa87d4;
    --pink-080:#f7b7e2;
    --pink-090:#f7daed;
    --pink-100:#fcf0f8;
}

/* Dark mode specifieke aanpassingen */
body.dark-mode {
    /* Schaduwen subtieler maken */
    --shadow-sm: 0 1px 2px 0 rgba(255, 255, 255, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
}