/* ****************************************
Root.
All instructions related to the root.
**************************************** */
:root
{
    /*
    Fonts
    */
    --base-font: Arial, Verdana, sans-serif;
    --base-font-size: 1em;
    --base-font-size-md: calc(0.800em + 0.24vw);
    --base-font-size-lg: calc(1em + 0.24vw);
    
    /*
    Colors
    */
    --base-color: whitesmoke;
    
    --color-black: black;
    --color-gray: #333333;
    --color-gray-light: #999999;
    --color-gray-medium: #494949;
    --color-green: #65805d;
    --color-blue: #486d80;

    --color-font-blue: #1576bd;

    /*
    Division Colors
    */
    --color-metal7: #3973b7;
    --color-metal7-over: #3973b780;
    --color-cast7: #cb3233;
    --color-cast7-over: #cb323380;
    --color-enduride: #5dab55;
    --color-enduride-over: #5dab5580;
    --color-megatraction: #e37e3a;
    --color-megatraction-over: #e37e3a80;


  
    /*
    Layout Spacer
    */
    --mobile-gap-container: 1.2rem;
    --mobile-gap-container-large: 2.4rem;

    --desktop-gap-container-sm: 1.5vw;
    --desktop-gap-container: 3vw;
    --desktop-gap-container-large: 6vw;
    --desktop-gap-container-xlarge: 12vw;
    
    /*
    Layout Global Spacing
    */
    --mobile-global-static-gap-md: 1.2rem;
    --mobile-global-static-gap-lg: 2.4rem;

    --desktop-global-responsive-gap-sm: 1.5vw;
    --desktop-global-responsive-gap-md: 3.0vw;
    --desktop-global-responsive-gap-lg: 6.0vw;

    --desktop-global-static-gap-sm: 1.5rem;
    --desktop-global-static-gap-md: 3.0rem;


    /*
    Layout Global Spacing
    */
    --mobile-responsive-gap-top: 18vw;
    --mobile-responsive-gap-bottom: 16vw;

    --desktop-responsive-gap-top: 8vw;
    --desktop-responsive-gap-bottom: 6vw;
  }