/* SETTINGS */
/*
** Ajouter les variables du json ici
** et celles existantes à remplacer progressivement
** pour supprimer les différents fichiers CSS spécifiques
*/

/* Color */

:root{
--color-comp-hue: 210;
--color-comp-saturation: 10%;

--color-white: hsl(0 0% 100%);
--color-grey-050: hsl(var(--color-comp-hue) var(--color-comp-saturation) 99%);
--color-grey-100: hsl(var(--color-comp-hue) var(--color-comp-saturation) 95%);
--color-grey-200: hsl(var(--color-comp-hue) var(--color-comp-saturation) 85%);
--color-grey-300: hsl(var(--color-comp-hue) var(--color-comp-saturation) 75%);
--color-grey-400: hsl(var(--color-comp-hue) var(--color-comp-saturation) 65%);
--color-grey-500: hsl(var(--color-comp-hue) var(--color-comp-saturation) 50%);
--color-grey-600: hsl(var(--color-comp-hue) var(--color-comp-saturation) 40%);
--color-grey-700: hsl(var(--color-comp-hue) var(--color-comp-saturation) 30%);
--color-grey-800: hsl(var(--color-comp-hue) var(--color-comp-saturation) 25%);
--color-grey-900: hsl(var(--color-comp-hue) var(--color-comp-saturation) 10%);
--color-grey-950: hsl(var(--color-comp-hue) var(--color-comp-saturation) 1%);
--color-black: hsl(0 0% 0%);

--color-white-trans10: hsl(0 0% 100% / .1);
--color-white-trans15: hsl(0 0% 100% / .15);
--color-white-trans25: hsl(0 0% 100% / .25);
--color-white-trans50: hsl(0 0% 100% / .5);
--color-white-trans75: hsl(0 0% 100% / .75);

--color-black-trans10: hsl(0 0% 0% / .1);
--color-black-trans15: hsl(0 0% 0% / .15);
--color-black-trans25: hsl(0 0% 0% / .25);
--color-black-trans50: hsl(0 0% 0% / .5);
--color-black-trans75: hsl(0 0% 0% / .75);

--color-red: hsl(350 90% 45%);
--color-orange: hsl(30 90% 50%);
--color-yellow: hsl(55 90% 45%);
--color-green: hsl(100 80% 40%);
--color-blue: hsl(200 80% 40%);
--color-purple: hsl(270 50% 50%);
}

/* Layout */

body{
--content-width: 40rem; /* 65ch ? */
--wide-width: 64rem; /* 105ch ? */
}


/* Shadow */

:root{
--box-shadow-100: 0px 0px 4px;
--box-shadow-400: 0px 2px 6px;
--box-shadow-700: 0px 4px 8px;
--box-shadow-900: 0px 8px 12px;
--color-ui-shadow: var(--color-black-trans15);
}

/* Spacing */

:root{
--padding-100: .125em .25em;
--padding-200: .25em .5em;
--padding-300: .375em .75em;
--padding-400: .5em 1em;
--padding-700: 1em 2em;
--border-radius-400: .25em;
--border-radius-500: .5em;
--border-radius-700: 1rem;
--border-radius-900: 100vw;
}

/* Typography */

/*
100 – Thin
200 – Extra Light (Ultra Light)
300 – Light
400 – Normal
500 – Medium
600 – Semi Bold (Demi Bold)
700 – Bold
800 – Extra Bold (Ultra Bold)
900 – Black (Heavy)
*/

/* Font Families */

:root{
/* Serif */
--font-stack-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
--font-stack-old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--font-stack-slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
--font-stack-antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
--font-stack-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
/* Sans serif */
--font-stack-system-ui: system-ui, sans-serif;
--font-stack-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
--font-stack-geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
--font-stack-classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
--font-stack-neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--font-stack-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
--font-stack-tounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
/* Monospace */
--font-stack-monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
--font-stack-monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
/* Handwritten */
--font-stack-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

--font-serif: var(--font-stack-transitional);
--font-sans: var(--font-stack-humanist);
--font-mono: var(--font-stack-monospace-code);
}

/* Font Sizes */

/*
For 16px font-size:
- 48px = 3rem
- 32px = 2rem
- 20px = 1.25rem
- 18px = 1.125rem;
- 16px = 1rem
- 15px = .9375rem
- 14px = .875rem
- 13px = .8125rem
*/
/*
h1 : 2.00 rem
h2 : 1.50 rem
h3 : 1.17 rem
h4 : 1.00 rem
h5 : 0.83 rem
h6 : 0.67 rem
*/

:root{
--font-size-base: 16px;

--font-size-100: .8125rem;
--font-size-200: .875rem;
--font-size-300: .9375rem;
--font-size-400: 1rem;
--font-size-500: clamp(1rem,2.5vw + .25rem,1.5rem);
--font-size-600: clamp(1.25rem,2.75vw + .275rem,2rem);
--font-size-700: clamp(1.5rem,3vw + .3rem,3rem);
--font-size-800: clamp(2rem,4vw + .4rem,4.5rem);
--font-size-900: clamp(3rem,5vw + .5rem,6rem);

--font-size-body: 1.125rem;
--font-size-header: var(--font-size-400);
--font-size-footer: var(--font-size-300);

--font-size-h1: var(--font-size-700);
--font-size-h2: var(--font-size-600);
--font-size-h3: var(--font-size-500);
--font-size-h4: var(--font-size-400);
--font-size-h5: var(--font-size-400);
--font-size-h6: var(--font-size-400);
--font-size-p: var(--font-size-400);
}