:root
{
    /*********************/
    /** Base variabless **/
    /*********************/
    --color-base-warning: #ffb00f;
    --color-base-danger: #da1e28;
    --color-base-success: #189b47;
    --color-base-info: var(--color-ref);

    --color-normal: color-mix(in oklab, var(--color-ref) 20%, var(--color-base-normal));
    --color-hover: color-mix(in oklab, var(--color-base-normal), var(--color-ref) var(--mix-percentage-hover));
    --color-disabled: color-mix(in oklab, var(--color-ref) 12%, var(--color-base-disabled));

    --color-neutral-grey : #808080;

    --color-blue500: #0d6efd;
    --color-indigo500: #6610f2;
    --color-pink500: #d63384;
    --color-red500: #dc3545;
    --color-orange500: #fd7e14;
    --color-yellow500: #ffc107;
    --color-green500: #198754;
    --color-teal500: #20c997;
	--color-lime500: #CDDC39;
    --color-cyan500: #0dcaf0;
	--color-brown500: #795548;
    --color-gray500: #adb5bd;
    --color-black500: #212121;

    --color-blue400: #3d8bfd;
    --color-teal400: #4dd4ac;
    --color-yellow400: #ffcd39;
    --color-red400: #e35d6a;

    --color-base-filter-active: #31aa85;
    --color-base-filter-system: #b46dd4;


    /**********************/
    /** Common variables **/
    /**********************/
 	--ColorA050: color-mix(in oklab, var(--color-ref) 5%, white);
	--ColorA100: color-mix(in oklab, var(--color-ref) 20%, white);
    --ColorA200: color-mix(in oklab, var(--color-ref) 40%, white);
    --ColorA300: color-mix(in oklab, var(--color-ref) 60%, white);
    --ColorA400: color-mix(in oklab, var(--color-ref) 80%, white);
    --ColorA500: var(--color-ref);
    --ColorA600: color-mix(in oklab, var(--color-ref) 80%, black);
    --ColorA700: color-mix(in oklab, var(--color-ref) 60%, black);
    --ColorA800: color-mix(in oklab, var(--color-ref) 40%, black);
    --ColorA900: color-mix(in oklab, var(--color-ref) 20%, black);

    --color-desaturated-ref: color-mix(in oklab, var(--color-neutral-grey) 25%, var(--color-base-ref));
	--color-desaturated-danger: color-mix(in oklab, var(--color-neutral-grey) 25%, var(--color-base-danger));
	--color-desaturated-info: color-mix(in oklab, var(--color-neutral-grey) 25%, var(--color-base-info));
    --color-label: color-mix(in oklab, var(--color-base-label), var(--ColorA500) 6%);

    /********************/
    /** Buttons colors **/
    /********************/
    --color-button: var(--color-normal);
    --color-hover-button: var(--color-hover);
    --color-disabled-button: var(--color-disabled);

/*VGN à supprimer (début)*/
	--text-color-primary-red: 255;
	--text-color-primary-green: 255;
	--text-color-primary-blue: 255;
	--text-color-blend: 0;
	--text-color-alpha1: 0.38;
	--text-color-alpha2: 0.60;
	--text-color-alpha3: 0.87;
/*VGN à supprimer (fin)*/

	--color-module: var(--color-base-background);
	--color-Separator: var(--color-base-disabled);

	--font-familyDefault: "Roboto", "Noto Sans SC", "Noto Sans KR", "Noto Kufi Arabic", sans-serif;
	--font-familyTitleMenu: "Roboto Condensed";
	--font-familySubMenu: "Roboto Condensed";
	--font-familyModule: "Roboto";
	--font-familyTab: "Roboto Condensed";
	--font-familyMono: "Noto Sans Mono";
	--font-widthTitleMenu: 14px;
	--font-widthMenu: 19px;
	--font-widthSubMenu: 15px;
	--font-widthModule: 12px;
	--padding-TitleMenu: calc(calc(var(--height-level1) - calc(var(--font-widthTitleMenu) + 2px )) / 2);
	--font-size: 13px;

	--height-tab: 32px;
	--height-headerBar: 46px;
	--height-headerImage: 24px;
	--width-headerImage: 24px;
	--height-headerButton: var(--height-headerImage);
	--height-toolbarButton: 24px;
	--padding-headerButton: 7px;
	--width-headerButton: calc(var(--width-headerImage) + calc(var(--padding-headerButton) * 2));
	--width-headerLogo: calc(var(--height-headerBar) * 3.28261);
	--margin-vertically-headerButton: calc( calc( (var(--height-headerBar) - var(--height-headerButton)) ) / 2);
	--margin-horizontally-headerButton: calc( calc( (var(--width-headerButton) - var(--height-headerButton)) ) / 2);/*all the button are square*/
	--height-level1: 35px;
	--top-Level2: var(--height-level1);


	/* BIM variables */
	--bimToolbarHeight: 42px;
	--bimOverlayHelpPanelsTop: calc(var(--bimToolbarHeight) - 1px);


	/* Coswin Open variables (only in light mode) */
	--coswinopen-background-color-grey: #f2f2f2;

	--coswinopen-color-black: #2f4050;
	--coswinopen-color-blue: #159eda;
	--coswinopen-color-green: #91bc29;

	--coswinopen-color-hover-black: #596b7c;
	--coswinopen-color-hover-blue: #65cfff;
	--coswinopen-color-hover-green: #c4ef5d;

	--coswinopen-font-color-black: #212121;
	--coswinopen-font-color-white: #ffffff;

	/* Dialog boxes */
	/* Plain dialog, same as Question dialog
	--dialog-type-plain-color-red: var(--dialog-type-question-color-red);
	--dialog-type-plain-color-green: var(--dialog-type-question-color-green);
	--dialog-type-plain-color-blue: var(--dialog-type-question-color-blue); */
	--dialog-type-plain-color: var(--dialog-type-question-color);
	--dialog-type-plain-button-color-normal: var(--dialog-type-question-button-color-normal);
	--dialog-type-plain-button-color-hover: var(--dialog-type-question-button-color-hover);

	/* All dialog types */
	--dialog-pane-header-height: 40px;
	--dialog-pane-header-padding: 0px;
	--dialog-pane-header-total-height: calc(var(--dialog-pane-header-height) + (2 * var(--dialog-pane-header-padding)));

	--dialog-pane-icon-width: 50px;
	--dialog-pane-icon-padding: 10px;
	--dialog-pane-icon-total-width: calc(var(--dialog-pane-icon-width) + (2 * var(--dialog-pane-icon-padding)));
	--dialog-icon-width: 50px;
	--dialog-icon-height: 50px;

	--dialog-pane-content-padding: 10px;

	--dialog-pane-button-height: 36px;
	--dialog-pane-button-padding: 8px;
	--dialog-pane-button-total-height: calc(var(--dialog-pane-button-height) + (2 * var( --dialog-pane-button-padding )));
	--dialog-button-disabled-color: var(--color-disabled);
	--dialog-button-disabled-color-normal: var(--color-disabled-field-background);

	/* BIM colors bim-type-arrows */
	--bim-type-arrows-color-normal: var(--color-normal);
	--bim-type-arrows-color-hover: var(--color-hover);

	/* Module bar */
	--mainColumn-moduleBar-height: auto;
	--mainColumn-moduleBar-width: 150px;
	--mainColumn-moduleBar-text-height: 31px;
	--mainColumn-openLink-width: 16px;
	
	/**************/
	/** Carousel **/
	/**************/
	--color-carousel-screen: var(--color-tree);
	--color-carousel-area1-background: var(--color-gantt-content-blue);
	--color-carousel-area1-label: color-mix(in oklab, var(--color-gantt-content-blue) 50%, var(--color-base-background));
	--color-carousel-area2-background: var(--dialog-type-information-color);
	--color-carousel-area2-label: var(--dialog-type-information-button-color-hover);
	--color-carousel-area3-background: var(--dialog-type-error-color);
	--color-carousel-area3-label: var(--dialog-type-error-button-color-hover); 
}