:root {
    /* logotype */
    --logo: url(https://www.carto.zone/wp-content/uploads/2021/11/cropped-cropped-carto.zone-7-logo-fondo-trasparente.png);

    /**
     * Theme colors
     */
    --color-a: #15375C;
    --color-b: #0E3C6E;
    --color-c: #035CBB;
    --color-d: #157DED;
    --color-e: #F7B500;
    --color-dark: #30343f;
    --color-clear: #F5F5F5;

    /* These two define the main color, repeated all over the UI, and its
     * contrast color for when accent is used as background color */
    --color-accent: var(--color-d);
    --color-accent-contrast: var(--color-clear);

    /**
     * Colors that must be defined and can be overriden
     */
    --color-primary: var(--color-a);
    --color-primary-contrast: white;
    --color-secondary: var(--color-b);
    --color-secondary-contrast: white;
    --color-tertiary: var(--color-c);
    --color-tertiary-contrast: white;

    /* non-focused components and the like */
    --color-highlight: #F1F1F1;
    --color-highlight-contrast: var(--color-dark);
    --color-active: var(--color-accent);
    --color-active-contrast: var(--color-accent-contrast);

    /* color by role */
    --color-error: #F46969;
    --color-info: #4676D9;

    /* background and text colors can be used to define a dark theme */
    --color-bg: var(--color-clear);
    --color-text: var(--color-dark);

    --color-header-hover-bg: var(--color-tertiary);
    --color-header-hover-text: var(--color-tertiary-contrast);
    --color-header-text: var(--color-primary-contrast);
    --color-header-bg: var(--color-primary);
    --color-link: var(--color-accent);

    --mapside-logo-bg-color: var(--color-primary);
    --mapside-logo-text-color: var(--color-primary-contrast);
    --mapside-logo-bg-image: var(--logo);
    --mapside-logo-bg-size: contain;
    --mapside-logo-bg-position: center;
    --mapside-logo-bg-repeat: no-repeat;

    --color-table-head-bg: var(--color-granite-gray);
    --color-table-head-text: var(--color-clear);
    --color-table-row-1: var(--color-isabelline);
    --color-table-row-2: var(--color-languid-lavender);
    --color-table-hover: var(--color-bubbles);

    --color-maplist-hover-bg: var(--color-accent);
    --color-maplist-hover-text: var(--color-accent-contrast);
    --color-maplist-hover-link: var(--color-accent-contrast);

    --container-max-width: 1000px;

    --border-radius: 5px;
    --component-spacing: 5px;

    --header-height: 70px;
    --header-item-padding: 5px;

    --home-header-img-height: 200px;
    --home-header-bg-color: var(--color-bg);
    --home-header-bg-image: var(--logo);
    --home-header-bg-size: contain;
    --home-header-bg-position: center;
    --home-header-bg-repeat: no-repeat;
    --home-title-align: center;

    --auth-max-width: 400px;
    --auth-margin-top: 100px;

    --sidebar-width: 350px;
    --sidebar-header-height: 40px;
    --sidebar-header-text-size: 18px;
    --sidebar-header-bg-color: var(--color-primary);
    --sidebar-header-text-color: var(--color-primary-contrast);
    --sidebar-item-height: 30px;
    --sidebar-item-hover-bg-color: var(--color-green);

    /* Tool box */
    --toolbox-spacing: 10px;
    --toolbox-margin: var(--toolbox-spacing);
    --toolbox-height: 40px;
    --toolbox-top: var(--toolbox-margin);
    --toolbox-right: var(--toolbox-margin);
    --toolbox-tool-spacing: var(--toolbox-spacing);

    /* Search box */
    --search-box-width: 400px;
    --search-box-bg-color: #fff;
    --search-box-height: var(--toolbox-height);
    --search-box-margin: var(--toolbox-margin);

    /* form inputs */
    --form-input-height: 40px;
    --form-input-font-size: 18px;
    --form-input-bg-color: white;
    --form-input-text-color: black;
}