:root {

   
    --font-title: 'Borna', Arial, sans-serif;
    --font: 'Nunito', Arial, sans-serif;

    --fs-small: 11px;
    --fs-normal: 14px;

    font-size: 14px;
    --unit: 24px;

    --padding-body: 32px;
    --padding-inner: 16px;

    --radius-small: 3px;
    --radius-btn: 6px;




    --header-h: 60px;

    --white: white;
    --color-bg: white;


    --color-violet:          #6e62a4;
    --color-violet-medium:   #9b92c4;
    --color-violet-light:    #e1dfec;

    --color-yellow:          #c4a233;
    --color-yellow-medium:   #e0c46a;
    --color-yellow-light:    #f5f0d5;
    --color-map:        #ad8422;

    --color-blue:          #0f70c0;
    --color-blue-medium:   #5aa0da;
    --color-blue-light:    #d1e5f7;

    --color-orange:          #f17f2d;
    --color-orange-medium:   #f3a066;
    --color-orange-light:    #f3e7e0;

    --color-green:          #007953;
    --color-green-medium:   #a1ccbe;;
    --color-green-light:    #d5ebe4;
    --color-green-black:    #016042;

    --color-txt:       rgb(41, 41, 41);
    --color-txt-light: #a5a9a9;
    --color-light:      #DCDDDD;
    --color-x-light:    #eaebeb;


    --color: var(--color-green);
    --color-medium: var(--color-green-medium);
    --color-light: var(--color-green-light);

 

    
}


[data-type="livret"]{
    --color: var(--color-violet);
    --color-medium: var(--color-violet-medium);
    --color-light: var(--color-violet-light);
}


[data-type="base-connaissance"]{
    --color: var(--color-yellow);
    --color-medium: var(--color-yellow-medium);
    --color-light: var(--color-yellow-light);
}

[data-type="atelier"]{
    --color: var(--color-orange);
    --color-medium: var(--color-orange-medium);
    --color-light: var(--color-orange-light);
}