:root {
    /* Klant logo zoals je deze hebt geupload */
    --cce-klant-logo:url('https://assets.compucase.nl/themes/simpelarbozaken/logo.png');
    --cce-klant-logo-white:url('https://assets.compucase.nl/themes/simpelarbozaken/logo-white.png');

    /* Placeholder */
    /* --cce-klant-logo:url('https://dev.compucase.nl/images/logo-compucase-horizontal-white.png'); */
    /* --cce-klant-logo:url('https://dev.compucase.nl/logo.png'); */
    /* --cce-klant-logo-white:url('https://dev.compucase.nl/logo-white.png'); */
    

    /* ========== DEFAULT KLEUREN ========== */

    /* Zet primaire kleuren */
    --primary-color: #002e1e;
    --primary-color-light: #1a4334; /* ~10% lichter */
    --primary-color-dark: #00291b;  /* ~10% donkerder */
    --primary-contrast: #ffffff;

    /* Zet primaire RGB kleuren voor RGBA gebruik */
    --primary-color-rgb: 0, 46, 30;
    --primary-contrast-rgb: 255, 255, 255;

    /* Zet accent kleuren */
    --accent-color: #008493;
    --accent-color-light: #1a909e; /* ~10% lichter */
    --accent-color-dark: #007784;  /* ~10% donkerder */
    --accent-contrast: #ffffff;

    /* Zet accent RGB kleuren voor RGBA gebruik */
    --accent-color-rgb: 0, 132, 147;
    --accent-contrast-rgb: 255, 255, 255;

    /* Custom variabelen */
    --cce-linear-gradient: linear-gradient(45deg, rgba(var(--accent-color-rgb), 1), rgba(0, 147, 110, 1));

    /* ========== DEFAULT VARIABELEN ========== */

    /*  Navigatie bovenste balk kleuren */
    --cce-nav-top-bg-color: var(--primary-contrast);
    --cce-nav-top-text-color: var(--primary-color);

    /*  Navigatie onderste balk achtergrondkleur */
    --cce-nav-bottom-bg-color: var(--cce-linear-gradient);
    --cce-nav-bottom-text-color: var(--primary-contrast);

    /* Navigatie actief item kleuren  */
    --cce-active-menu-bg-color: var(--accent-color-dark);
    --cce-active-menu-text-color: var(--primary-contrast);

    /* Navigatie submenu hover kleuren */
    --cce-active-submenu-bg-color: var(--accent-color-light);
    --cce-active-submenu-text-color: var(--accent-contrast);

    /* Link caret icoon kleuren */
    /* Caret default */
    --cce-menu-icon-color: rgba(var(--primary-contrast-rgb), 0.8);
    --cce-menu-icon-border-color: rgba(var(--primary-contrast-rgb), 0.5);
    --cce-menu-icon-bg-color: transparent;

    /* Caret actief menu item */
    --cce-active-menu-icon-color: rgba(var(--accent-contrast-rgb), 0.8);
    --cce-active-menu-icon-border-color: rgba(var(--accent-contrast-rgb), 0.2);
    --cce-active-menu-icon-bg-color: var(--accent-color);
    
    /* Caret open menu item */
    --cce-open-menu-icon-color: rgba(var(--accent-contrast-rgb), 0.8);
    --cce-open-menu-icon-border-color: rgba(var(--accent-contrast-rgb), 0.2);
    --cce-open-menu-icon-bg-color: var(--accent-color);

    /* Dropdown navigatie link seperator */
	/* Bug: wordt niet gebruikt maar is eigenlijk ook niet nodig */
    --cce-menu-seperator-color: var(--accent-color);

    /* Navigatiebalk bedrijfsnaam kleuren en display (om te verbergen) */
    --cce-logo-bedrijfsnaam-bg-color: var(--primary-color-light);
    --cce-logo-bedrijfsnaam-text-color: var(--primary-contrast);
    --cce-bedrijfsnaam-display: none;

    /* Hero icoon achtergrond en tekstkleur */
    --ut-hero-region-icon-background-color: var(--accent-color);
    --ut-hero-region-icon-text-color: var(--accent-contrast);

    /* Links kleur */
    --ut-link-text-color: var(--primary-color);

    /* Logo hoogte en breedte */
    --ut-header-logo-height: 48px;
    --cce-max-logo-width: 400px;
    --image-width: auto;
	--cce-logo-height: var(--ut-header-logo-height);
    --cce-logo-height-login: 56px;

    /* Login scherm */
    --cce-login-header-bg-color: var(--cce-linear-gradient);
    --cce-login-header-text-color: #FFF;
    --cce-login-header-text-display: none;
    --ut-login-region-background-color: var(--primary-contrast);
    --cce-tabs-bg-color: rgba(var(--primary-colo-rgb), 0.1);
    --cce-tabs-hover-bg-color: rgba(var(--primary-color), 0.2);
    --cce-tabs-text-color: black;
}


/* Button */
.t-Button--hot {
    --a-button-background-color: var(--accent-color);
    --a-button-text-color: var(--accent-contrast);
    --a-button-hover-background-color: var(--accent-color-dark);
    --a-button-hover-text-color: var(--accent-contrast);
    --a-button-active-background-color: var(--accent-color-dark);
	--ut-focus-outline-color: var(--accent-color-light);
}

/* Logo applicatie */
.t-Header-logo img {
    width: var(--image-width);
    height: var(--cce-logo-height);
    content: var(--cce-klant-logo);
}

/* Logo inlogscherm */
#cce_login_logo {
    width: var(--image-width);
    height: var(--cce-logo-height-login);
    content: var(--cce-klant-logo-white);
}

.t-Login-region {
    border-color: rgba(var(--primary-color-rgb), 0.3);
}

.t-Header .t-Header-nav .t-Header-nav-list {
    background: var(--cce-linear-gradient);
}