/* -------------
    SOMMAIRE
------------- */

/* @AUTHOR : Nicolas BOUDOT */

/*
  1 - COULEURS
        Palette
        Attribution
        Fonctionnalités

  2 - FONT-FAMILY
*/



:root {

    /* -----------------
      1 - COULEURS
            Palette
    ----------------- */


    /*
      @infos : Pourquoi déclarer les couleurs en RGB ?
        Pour faciliter l'intégration des couleurs ainsi que leur variante avec de la transparence,
        il est préférable de les déclarer en RGB.
        On pourra ensuite déclarer dans nos fichiers : background-color: rgb(var(--color-primary--rgb-value) / 65%);
    */

    /* Blanc */
	--white:                    #ffffff;
	    --white--rgb-value:   255 255 255;

    /* Noir */
	--black:                #000000;
	    --black--rgb-value:     0 0 0;
	--dark-gray:            #24262C;
	    --dark-gray--rgb-value:     36 38 44;

    /* Gris */
    --gray-100:                   #F8F8F8;
        --gray-100--rgb-value:  248 248 248;
    --gray-200:                   #F4F4F4; /* Gris */
        --gray-200--rgb-value:  244 244 244;
    --gray-300:                   #EDECEA; /* Gris */
        --gray-300--rgb-value:  237 236 234;
    --gray-400:                   #DBDBDB;
        --gray-400--rgb-value:  219 219 219;
    --gray-500:                   #C7C7C7;
        --gray-500--rgb-value:  199 199 199;
    --gray-600:                   #96918B; /* Gris */
        --gray-600--rgb-value:  150 145 139;
    --gray-700:                   #707070; /* Gris */
        --gray-700--rgb-value:  112 112 112;
    --gray-800:                   #343a40;
        --gray-800--rgb-value:     52 58 64;
    --gray-900:                   #2C2C2C; /* Gris */
        --gray-900--rgb-value:     44 44 44;

    /* Couleurs */
    --blue-light:                     #C9D1FD;
        --blue-light--rgb-value:    201 209 253;
    --blue:                           #3151FF;
        --blue--rgb-value:            49 81 255;
    --blue-dark:                      #22305D;
        --blue-dark--rgb-value:        34 48 93;
    --indigo:                         #4155EB;
        --indigo--rgb-value:          65 85 235;
    --purple:                         #C9D1FD;
        --purple--rgb-value:        201 209 253;
    --pink:                           #EF9297; /* Rose */
        --pink--rgb-value:          239 146 151;
    --red:                            #DC3E38; /* Rouge */
        --red--rgb-value:              220 62 56;
    --red-dark:                       #B90100;
        --red-dark--rgb-value:          185 1 0;
    --red-brown:                      #5C3A31;
        --red-brown--rgb-value:        92 58 49;
    --orange:                         #E3693E;
        --orange--rgb-value:         227 105 62;
    --khaki:                          #B7A568;
        --khaki--rgb-value:         183 165 104;
    --yellow:                         #F6BC27;
        --yellow--rgb-value:         246 188 39;
    --yellow-dark:                    #7a6f2e;
        --yellow-dark--rgb-value:    122 111 46;
    --green-citrus:                   #AACC3A; /* Vert pastel */
        --green-citrus--rgb-value:  170 204 58;
    --green-lime:                     #8AAD36; /* Vert-Gris */
        --green-lime--rgb-value:    138 173 54;
    --green:                          #60A03B; /* Vert */
        --green--rgb-value:            96 160 59;
    --teal:                           #20c997;
        --teal--rgb-value:           32 201 151;
    --cyan:                           #17a2b8;
        --cyan--rgb-value:           23 162 184;
    --deep-teal:                      #006572;
        --deep-teal--rgb-value:       0 101 114;
    --ocean-blue:                     #0099B6;
        --ocean-blue--rgb-value:       0 153 182;
    --aqua-mint:                      #00ADBA;
        --aqua-mint--rgb-value:       0 173 186;
    --soft-aqua:                      #A5D7D5;
        --soft-aqua--rgb-value:     165 215 213;



    /* -------------------------
      1 - COULEURS
            Attribution
    ------------------------- */

    /*
        @infos : Liste des noms
            Pour retrouver facilement les 10 noms de couleurs possibles pour un thème :

        --color-primary:        var(--gray-100);
        --color-secondary:      var(--gray-100);
        --color-tertiary:       var(--gray-100);
        --color-quaternary:     var(--gray-100);
        --color-quinary:        var(--gray-100);
        --color-senary:         var(--gray-100);
        --color-septenary:      var(--gray-100);
        --color-octonary:       var(--gray-100);
        --color-nonary:         var(--gray-100);
        --color-denary:         var(--gray-100);
    */

    /* Valeurs RGB du thème */
    --color-primary--rgb-value:     var(--deep-teal--rgb-value);
    --color-secondary--rgb-value:   var(--ocean-blue--rgb-value);
    --color-tertiary--rgb-value:    var(--aqua-mint--rgb-value);
    --color-quaternary--rgb-value:  var(--soft-aqua--rgb-value);
    --color-quinary--rgb-value:     var(--gray-900--rgb-value);

    /* Thème */
    --color-primary:        rgb(var(--color-primary--rgb-value));
    --color-secondary:      rgb(var(--color-secondary--rgb-value));
    --color-tertiary:       rgb(var(--color-tertiary--rgb-value));
    --color-quaternary:     rgb(var(--color-quaternary--rgb-value));
    --color-quinary:        rgb(var(--color-primary--rgb-value));

    /* Liens */
    --color-hyperlink:      var(--gray-700);

    /* Défaut */
    --color-success:       #28a745;
    --color-info:          #17a2b8;
    --color-warning:       #ffc107;
    --color-danger:        #dc3545;
    --color-light:         #f8f9fa;
    --color-dark:          #343a40;



    /* -----------------
      2 - FONT-FAMILY
    ----------------- */

    /*
        @exemple :
        --ff-primary:           "ardoise-std", sans-serif;
        --ff-primary--narrow:   "ardoise-narrow-std", sans-serif;
        --ff-secondary:         "gravesend-sans", sans-serif;
    */

    --font-primary:     'Plus Jakarta Sans', sans-serif;
    --font-secondary:   'Playfair Display', serif;
}