/* Variables CSS */
@import url(https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap); /* Delicious Handrawn */
@import url(https://fonts.google.com/specimen/Barlow+Semi+Condensed?query=barlow+sem); /* Barlow Semi Condensed */

:root {
    /* Color styles */
    --clr--primary: rgba(13, 110, 253, 1);
    --clr--secondary: rgba(108, 117, 125, 1);
    --clr--success: rgba(25, 135, 84, 1);
    --clr--danger: rgba(220, 53, 69, 1);
    --clr--warning: rgba(255, 193, 7, 1);
    --clr--info: rgba(13, 202, 240, 1);
    --clr--light: rgba(248, 249, 250, 1);
    --clr--dark: rgba(33, 37, 41, 1);    
    --clr--black: rgba(0, 0, 0, 1);
    --clr--border: rgba(222, 226, 230, 1);
    --clr--white: rgba(255, 255, 255, 1);
    /* Color nuancier */
    --clr--gray--100: rgba(248, 249, 250, 1);
    --clr--gray--200: rgba(233, 236, 239, 1);
    --clr--gray--300: rgba(222, 226, 230, 1);
    --clr--gray--400: rgba(206, 212, 218, 1);
    --clr--gray--500: rgba(173, 181, 189, 1);
    --clr--gray--600: rgba(108, 117, 125, 1);
    --clr--gray--700: rgba(73, 80, 87, 1);
    --clr--gray--800: rgba(52, 58, 64, 1);
    --clr--gray--900: rgba(33, 37, 41, 1);
    --clr--blue--100: rgba(231, 241, 255, 1);
    --clr--blue--200: rgba(158, 197, 254, 1);
    --clr--blue--300: rgba(110, 168, 254, 1);
    --clr--blue--400: rgba(61, 139, 253, 1);
    --clr--blue--500: rgba(13, 110, 253, 1);
    --clr--blue--600: rgba(10, 88, 202, 1);
    --clr--blue--700: rgba(8, 66, 152, 1);
    --clr--blue--800: rgba(5, 44, 101, 1);
    --clr--blue--900: rgba(3, 22, 51, 1);
    --clr--indigo--100: rgba(224, 207, 252, 1);
    --clr--indigo--200: rgba(194, 159, 250, 1);
    --clr--indigo--300: rgba(163, 112, 247, 1);
    --clr--indigo--400: rgba(133, 64, 245, 1);
    --clr--indigo--500: rgba(102, 16, 242, 1);
    --clr--indigo--600: rgba(82, 13, 194, 1);
    --clr--indigo--700: rgba(61, 10, 145, 1);
    --clr--indigo--800: rgba(41, 6, 97, 1);
    --clr--indigo--900: rgba(20, 3, 48, 1);
    --clr--purple--100: rgba(226, 217, 243, 1);
    --clr--purple--200: rgba(197, 179, 230, 1);
    --clr--purple--300: rgba(169, 142, 218, 1);
    --clr--purple--400: rgba(140, 104, 205, 1);
    --clr--purple--500: rgba(111, 66, 193, 1);
    --clr--purple--600: rgba(89, 53, 154, 1);
    --clr--purple--700: rgba(67, 40, 116, 1);
    --clr--purple--800: rgba(44, 26, 77, 1);
    --clr--purple--900: rgba(22, 13, 39, 1);
    --clr--pink--100: rgba(247, 214, 230, 1);
    --clr--pink--200: rgba(239, 173, 206, 1);
    --clr--pink--300: rgba(230, 133, 181, 1);
    --clr--pink--400: rgba(222, 92, 157, 1);
    --clr--pink--500: rgba(214, 51, 132, 1);
    --clr--pink--600: rgba(171, 41, 106, 1);
    --clr--pink--700: rgba(128, 31, 79, 1);
    --clr--pink--800: rgba(86, 20, 53, 1);
    --clr--pink--900: rgba(43, 10, 26, 1);
    --clr--red--100: rgba(248, 215, 218, 1);
    --clr--red--200: rgba(241, 174, 181, 1);
    --clr--red--300: rgba(234, 134, 143, 1);
    --clr--red--400: rgba(227, 93, 106, 1);
    --clr--red--500: rgba(220, 53, 69, 1);
    --clr--red--600: rgba(176, 42, 55, 1);
    --clr--red--700: rgba(132, 32, 41, 1);
    --clr--red--800: rgba(88, 21, 28, 1);
    --clr--red--900: rgba(44, 11, 14, 1);
    --clr--orange--100: rgba(255, 229, 208, 1);
    --clr--orange--200: rgba(254, 203, 161, 1);
    --clr--orange--300: rgba(254, 178, 114, 1);
    --clr--orange--400: rgba(253, 152, 67, 1);
    --clr--orange--500: rgba(253, 126, 20, 1);
    --clr--orange--600: rgba(202, 101, 16, 1);
    --clr--orange--700: rgba(152, 76, 12, 1);
    --clr--orange--800: rgba(101, 50, 8, 1);
    --clr--orange--900: rgba(51, 25, 4, 1);
    --clr--yellow--100: rgba(255, 243, 205, 1);
    --clr--yellow--200: rgba(255, 230, 156, 1);
    --clr--yellow--300: rgba(255, 218, 106, 1);
    --clr--yellow--400: rgba(255, 205, 57, 1);
    --clr--yellow--500: rgba(255, 193, 7, 1);
    --clr--yellow--600: rgba(204, 154, 6, 1);
    --clr--yellow--700: rgba(153, 116, 4, 1);
    --clr--yellow--800: rgba(102, 77, 3, 1);
    --clr--yellow--900: rgba(51, 39, 1, 1);
    --clr--green--100: rgba(209, 231, 221, 1);
    --clr--green--200: rgba(163, 207, 187, 1);
    --clr--green--300: rgba(117, 183, 152, 1);
    --clr--green--400: rgba(71, 159, 118, 1);
    --clr--green--500: rgba(25, 135, 84, 1);
    --clr--green--600: rgba(20, 108, 67, 1);
    --clr--green--700: rgba(15, 81, 50, 1);
    --clr--green--800: rgba(10, 54, 34, 1);
    --clr--green--900: rgba(5, 27, 17, 1);
    --clr--teal--100: rgba(210, 244, 234, 1);
    --clr--teal--200: rgba(166, 233, 213, 1);
    --clr--teal--300: rgba(121, 223, 193, 1);
    --clr--teal--400: rgba(77, 212, 172, 1);
    --clr--teal--500: rgba(32, 201, 151, 1);
    --clr--teal--600: rgba(26, 161, 121, 1);
    --clr--teal--700: rgba(19, 121, 91, 1);
    --clr--teal--800: rgba(13, 80, 60, 1);
    --clr--teal--900: rgba(6, 40, 30, 1);
    --clr--cyan--100: rgba(207, 244, 252, 1);
    --clr--cyan--200: rgba(158, 234, 249, 1);
    --clr--cyan--300: rgba(110, 223, 246, 1);
    --clr--cyan--400: rgba(61, 213, 243, 1);
    --clr--cyan--500: rgba(13, 202, 240, 1);
    --clr--cyan--600: rgba(10, 162, 192, 1);
    --clr--cyan--700: rgba(8, 121, 144, 1);
    --clr--cyan--800: rgba(5, 81, 96, 1);
    --clr--cyan--900: rgba(3, 40, 48, 1);

    /* Color */
    --clr--bg--header : var(--clr--orange--300);
    --clr--bg--footer: var(--clr--orange--300);
    --clr--bg--main: var(--clr--white);

    --clr--bg--navbutton : var(--clr--orange--100);
    --clr--bg--navbutton-hover : var(--clr--orange--200);
    --clr--b--navbutton : var(--clr--orange--200);  

    --clr--bg--carte: var(--clr--white);  
    --clr--bg--cartebutton : var(--clr--orange--100);
    --clr--b--cartebutton : var(--clr--orange--200);  
    --clr--bg--ajouter : var(--clr--success);
    --clr--bg--supprimer : var(--clr--danger);
    
    --clr--texte: var(--clr--black);
    --clr--grand-titre: var(--clr--orange--300);

    /* Font Family */
    --ff--title: "Delicious Handrawn", sans-serif;
    --ff--titre: "Delicious Handrawn", sans-serif;
    --ff--soustitre: "Barlow Semi Condensed", sans-serif;
    --ff--texte: "Barlow Semi Condensed", sans-serif;
    --ff--button1: "Barlow Semi Condensed", sans-serif;
    --ff--button2: "Barlow Semi Condensed", sans-serif;

    /* Font weight */
    --fw--100: 100;
    --fw--600: 600;
    --fw--800: 800;

    /* Font Size */
    --fs--grandtitre: 3rem;
    --fs--navbouton: .8rem;
    --fs--cartebouton: .8rem;

    /* Box-shadow */
    --bs--grand-titre: 3px 3px var(--clr--blue--200);

    /* Line Height */
    --lh--1: 1rem;
    --lh--1-5: 1.5rem;
    --lh--2: 2rem;
    --lh--2-5: 2.5rem;
    --lh--3: 3rem;
}