Variabili

:root{
    /* Editable Custom Variables */
    --header-height:64px;
    --header-height--mob:56px;
    
    --boxed-section-width:864px;
    
    
    /* Varibles Colors */
    --primary:hsla(41, 99%, 65%, 1);
    --primary-dark:hsla(41, 73%, 55%, 1);
    --primary-light:hsla(41, 99%, 78%, 1);
    --nero-puro:hsla(0, 0%, 0%, 1);
    --nero-950:hsla(36, 4%, 11%, 1);
    --nero-900:hsla(36, 4%, 14%, 1);
    --nero-800:hsla(36, 4%, 24%, 1);
    --nero-700:hsla(36, 4%, 36%, 1);
    --nero-600:hsla(36, 4%, 43%, 1);
    --bianco-400:hsla(45, 9%, 66%, 1);
    --bianco-300:hsla(45, 9%, 75%, 1);
    --bianco-200:hsla(45, 9%, 82%, 1);
    --bianco-100:hsla(45, 8%, 88%, 1);
    --bianco-50:hsla(45, 8%, 95%, 1);
    --bianco-puro:hsla(0, 0%, 100%, 1);

    --heading-color:var(--nero-950);
    --body-color:var(--nero-700);

    /* Variables Spacing */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:28px;
    --space-8:32px;
    --space-9:40px;
    --space-10:48px;
    --space-11:56px;
    --space-12:64px;
    --space-13:72px;
    --space-14:80px;
    --space-15:96px;
    --space-16:120px;
    --space-17:160px;
    --space-18:240px;
    --space-19:480px;
    --space-20:960px;

}


@media screen and (max-width:1024px){
    :root{
        --header-height:var(--header-height--mob,56px); 
    }
}```