/*==================================================
    COSMOS FACTORY
    Variables globales
==================================================*/

:root
{

    /*==============================
        Couleurs
    ==============================*/

    --color-bg:            #10141B;
    --color-surface:       #181E27;

    --color-text:          #ECECEC;
    --color-text-muted:    #A6AFBB;

    --color-accent:        #C7772E;   /* Cuivre */
    --color-highlight:     #4D8DE8;   /* Bleu Cosmos */

    --color-border:        rgba(255,255,255,.08);

    --color-shadow:        rgba(0,0,0,.30);


    /*==============================
        Typographie
    ==============================*/

    --font-title: "Oswald", sans-serif;
    --font-text: "Inter", sans-serif;


    /*==============================
        Largeurs
    ==============================*/

    --wrapper-width:1200px;

    --header-height:90px;
    --header-height-scroll:70px;


    /*==============================
        Espacements
    ==============================*/

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;
    --space-2xl:64px;
    --space-3xl:96px;
    --space-4xl:128px;


    /*==============================
        Coins
    ==============================*/

    --radius:6px;


    /*==============================
        Ombres
    ==============================*/

    --shadow-soft:
        0 12px 30px rgba(0,0,0,.25);


    /*==============================
        Transitions
    ==============================*/

    --transition:
        .35s ease;


	/*==============================
		Superpositions
	==============================*/

	--z-header: 1000;
	--z-navigation: 1100;


	/*==============================
		Header
	==============================*/

	--header-background:
		rgba(16, 20, 27, .28);

	--header-background-scroll:
		rgba(16, 20, 27, .92);

	--header-border:
		rgba(199, 119, 46, .48);


	/*==============================
		Hero
	==============================*/

	/* --hero-overlay: règle la zone d'ombre sous et autour du logo principal, sur l'accueil . 
	ça permet d'assombrir le côté gauche et l'arbre, en gardant les musiciens et le paysage plus lumineux */
	--hero-overlay:    
		linear-gradient(
			90deg,
			rgba(7, 10, 14, .96) 0%,
			rgba(7, 10, 14, .88) 22%,
			rgba(7, 10, 14, .57) 43%,
			rgba(7, 10, 14, .16) 68%,
			rgba(7, 10, 14, .12) 100%
		);

}