/***********************************
SUMMARY :
    1- Fonts declaration
    2- Default theme variables (FNAC)
    3- New themes

***********************************/

/* 1- Fonts declaration */

@font-face {
	font-family: "roboto";
	src:
		local("Roboto Regular"),
        url("/libs/fonts/Roboto/Roboto-Regular.woff2") format("woff2"),
        url("/libs/fonts/Roboto/Roboto-Regular.woff") format("woff"),
		url("/libs/fonts/Roboto/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* @font-face {
	font-family: "roboto";
	src:
		local("Roboto Light"),
        url("/libs/fonts/Roboto/Roboto-Light.woff2") format("woff2"),
        url("/libs/fonts/Roboto/Roboto-Light.woff") format("woff"),
		url("/libs/fonts/Roboto/Roboto-Light.ttf") format("truetype");
        font-weight: lighter;
        font-style: normal;
        font-display: swap;
} */
@font-face {
	font-family: "roboto";
	src:
		local("Roboto Bold"),
        url("/libs/fonts/Roboto/Roboto-Bold.woff2") format("woff2"),
        url("/libs/fonts/Roboto/Roboto-Bold.woff") format("woff"),
		url("/libs/fonts/Roboto/Roboto-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "CCSignLanguage";
  src:
    local("CCSignLanguage"),
      url("/libs/fonts/CCSignLanguage/CCSignLanguage-Regular.ttf");
	font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/**********************************/

/* 2- Default theme variables (FNAC) */

:root {

    /* note : colors from 0 or 1 to 5 --> 3 is always medium shade (1 and 5 are the deepest) */
    --primary-0-color: #FEFBF4; /* bg alert */
    --primary-1-color: #ffd32f; /* button solid active + focus */
    --primary-2-color: #ffc22b; /* button solid hover */
    --primary-3-color: #F5B027; /* button solid base */
    --primary-transp-color: color-mix(in srgb, var(--primary-3-color) 50%, transparent);  

    --secondary-2-color: #067255;/* banner background: */
    --secondary-3-color: #0C7153; /* medium : */
    --price-color: #D4180E;

    --grey-0-color: #FFFFFF; /* white : background card and footer */
    --grey-1-color: #F2F2F2; /* main background (lighter) */
    --grey-2-color: #D8D8D8; /* border & disabled */
    --grey-3-color: #757575; /* link, placeholder, label, auteur */
    --grey-4-color: #5F5F5F; /* minor text */
    --grey-5-color: #232323; /* body text */   
    --grey-transp-color: color-mix(in srgb, var(--grey-5-color) 50%, transparent); /* overlay */
    
    --outline-dark-color: var(--grey-5-color);
    --outline-primary-color: var(--primary-3-color);
    
    --error-light-color: #FDF3F3; /* bg alert */
    --error-color: #D4180E;
    --warning-light-color: #FEF9F2; /* bg alert */
    --warning-color: #F08604;
    --valid-light-color: #F6F9F2; /* bg alert */
    --valid-color: #4F8203;

    --border-default: 1px solid var(--grey-2-color);
    --border-radius: 0.25rem;
    --box-shadow-1: 0px 0px 1px 0px #0000000D, 0px 3px 4px 0px #00000014; /* card landing + bloc error */  
    --box-shadow-2: 0px 0px 18px 0px #0000000D, 5px 0px 16px 0px #0000000D, 2px 0px 8px 0px #0000004D; /* card offer*/  
    --box-shadow-3: 2px 0px 8px 0px rgba(0, 0, 0, 0.30), 5px 0px 16px 0px rgba(0, 0, 0, 0.05), 0px 0px 18px 0px rgba(0, 0, 0, 0.05); /* card offer*/  
    --transition-all: all 300ms ease-in-out;


    /* margin and gap */
    --spacer-xxs: 0.25rem; /* 4px */
    --spacer-xs: 0.5rem; /* 8px */
    --spacer-sm: 0.75rem; /* 12px */
    --spacer-md: 1rem; /* 16px */
    --spacer-lg: 1.5rem; /* 24px */
    --spacer-xl: 2rem; /* 32px */
    --spacer-xxl: 2.5rem; /* 40px */

    --text-xxs: 0.6875rem; /* 11px*/
    --text-xs: 0.8125rem; /* 13px*/
    --text-sm: 0.9375rem; /* 15px body */
    --text-md: 1.125rem; /* 18px*/
    --text-lg: 1.3125rem; /* 21px */
    --text-xl: 2rem; /* 32px title */

    --line-height: 1.28;
    --font-fallback: "Helvetica", Arial, sans-serif;
    --font: "roboto", var(--font-fallback);
  }

/**********************************/

/* 3- New themes */ 

/*!!! Overriding themes below !!! */

/* 
Example (add dynamic class theme on body) : 

.newTheme{
    --primary-color: #55acee;
    --text-sm: 1rem;
    --font-regular: "Poppin", var(--font-fallback);
}
.newTheme.title {
    color: var(--primary-color);
}
*/