:root {
    /* Colors */
    --color-black: rgb(0, 0, 0);

    --color-main: rgb(235, 102, 38);
    --color-secondary: rgb(51, 51, 51);
    --color-accessibility: rgb(160, 36, 10);

    --color-text: rgb(101, 101, 101);
    --color-text-modal: rgb(51, 51, 51);
    --color-text-secondary: rgb(255, 255, 255);
    --color-text-hover: rgb(161, 161, 161);

    --color-title: rgb(101, 101, 101);

    --color-placeholder: rgb(101, 101, 101);
    --color-placeholder-secondary: rgb(212, 212, 212);
    
    --color-bg-main: rgb(255, 255, 255);
    --color-bg-gradient: rgb(241, 241, 241);
    --color-bg-secondary: rgb(239, 239, 239);
    --color-bg-section-bis: rgb(245, 245, 245);
    --color-bg-button: linear-gradient(100deg, rgb(212, 51, 0) 0%, rgb(235, 102, 38) 100%);
    --color-bg-button-bis: transparent;
    --color-bg-button-bis-hover: rgb(226, 226, 226);
    --color-bg-button-bis-hover-accessibility: rgba(51, 51, 51, 0.12);
    --color-bg-input: rgb(245, 245, 245);
    --color-bg-input-secondary: rgb(255, 255, 255);
    --color-bg-input-radio: radial-gradient(closest-side at 42% 32%, rgb(255, 255, 255) 0%, rgb(230, 230, 230) 100%);

    --color-shadow: rgba(0, 0, 0, 0.161);
    --color-shadow-accessibility: rgba(51, 51, 51, 0.4);
    --color-shadow-button: rgba(235, 102, 38, 0.4);
    --color-shadow-input-radio: rgba(0, 0, 0, 0.271);


    /* Fonts */
    --font-family-header-home: 'Dancing_Script Regular', sans-serif;

    --font-family-h1-front-page: 'Poppins ExtraBold', sans-serif;
    --font-family-h1: 'Poppins Bold', sans-serif;
    --font-family-header-editorial: 'Poppins Bold', sans-serif;
    --font-family-header: 'Poppins SemiBold', sans-serif; /* h2 et titre de section */
    --font-family-thumnail-title: 'Poppins Regular', sans-serif; /* h2-h3 */

    --font-family-text: 'Poppins Regular', sans-serif;
    --font-family-text-bold: 'Poppins Bold', sans-serif;
    --font-family-text-medium: 'Poppins SemiBold', 'sans-serif';
    --font-family-text-italic: 'Poppins Italic', sans-serif;
    --font-family-text-light: 'Poppins Light', sans-serif;

    --font-family-cat-header: 'Poppins Bold', sans-serif;

    --font-family-placeholder: 'Poppins Light Italic', sans-serif;

    --font-family-caption: 'Poppins ExtraLight Italic', sans-serif;


    /* Font sizes */
    --font-size-header-home: 40px;

    --font-size-h1-front-page: 80px;
    --font-size-h2-front-page: 40px;

    --font-size-h1: 50px;

    --font-size-section-title: 25px; /* h2 */
    --font-size-thumnail-title: 20px; /* h2-h3 */

    --font-size-h2-editorial: 35px;
    --font-size-h3-editorial: 25px;
    --font-size-h4-editorial: 18px;
    --font-size-h5-editorial: 16px;
    --font-size-h6-editorial: 14px;

    --font-size-related-section-header: 20px; /* Voir le rendu réel, mais il faudra surement préférer --font-size-section-title et supprimer cette variable */

    --font-size-menu-item: 18px;
    --font-size-menu-item-icon: 20px;
    --font-size-submenu-item: 16px;

    --font-size-nav-step: 15px;

    --font-size-text: 16px;

    --font-size-caption: 16px;

    --font-size-toggler: 20px;
    --font-size-button: 17px;
    --font-size-cartridge: 15px;


    /* Line heights */
    --line-height-h1-front-page: 120px;
    --line-height-h2-front-page: 60px;

    --line-height-h1: 76px;

    --line-height-section-title: 38px; /* h2 */
    --line-height-thumnail-title: 30px; /* h2-h3 */

    --line-height-h2-editorial: 53px;
    --line-height-h3-editorial: 38px;
    --line-height-h4-editorial: 30px;
    --line-height-h5-editorial: 26px;
    --line-height-h6-editorial: 22px;

    --line-height-related-section-header: 30px; /* Voir le rendu réel, mais il faudra surement préférer --line-height-section-title et supprimer cette variable */

    --line-height-menu-item: 30px;
    --line-height-submenu-item: 23px;

    --line-height-nav-step: 23px;

    --line-height-text: 26px;

    --line-height-caption: 22px;

    --line-height-toggler: 24px;
    --line-height-button: 26px;
    --line-height-cartridge: 23px;

    
    /* Sizes */
    --dividing-line-small: 1px;
    --dividing-line-big: 10px;
}

[data-accessibility="accessible"] {
	/* Colors */
    --color-main: rgb(160, 36, 10);
    --color-secondary: rgb(51, 51, 51);

    --color-text: rgb(51, 51, 51);
    
    --color-title: rgb(51, 51, 51);

    --color-bg-button: linear-gradient(100deg, rgb(51, 51, 51) 0%, rgb(51, 51, 51) 100%);
    --color-bg-button-bis-hover: rgba(51, 51, 51, 0.12);

    --color-shadow: rgba(51, 51, 51, 0.4);
    --color-shadow-button: rgba(51, 51, 51, 0.4);
}