Variabler (CSS)

:root {

    //FOCUS ETC
    --keyboard-focus-color :  hsl(0, 53%, 53%);


    //SITE 

    --font-body : "Inter", sans-serif;
    --font-content : "Inter", sans-serif;
    --font-heading : "Poppins", sans-serif;
    
    --font-size : 16px;

    //Reach top at 1080: 20/1080 * 100 = 1,852
    --body-font-size: clamp(16px,1.527vw,20px);

    //--font-weight : 400;
    //--font-line-height : 1.5;
  
    --font-color:#000;
    --site-background-color: hsl(180, 23%, 80%);
    --site-border-color: #fff;

    --site-width: 1440px;

    // INNER (content): (designvarant)
    
    //--site-content-width: 1440px;
    //--site-content-margin: 0 auto;
   // --site-content-background: hsl(183, 24%, 81%);
    //--site-content-box-shadow :  0 3px 12px rgb(0 0 0 / 32%), 0 3px 38px rgb(0 0 0 / 43%);
   // --site-content-border : 1px solid #000;

   //should be minimum 1px to avoid collapsing margins
   --article__body-padding : 1em;


    //ARTICLE (Content) TYPHPGRAPHY
    --article-h1-margin-top : 2em;
    --article-h1-margin-bottom : .5em;

    --article-h1-weight : 500;
   

    --article-h2-weight : 500;
    --article-h2-size : 1.75em;
    --article-h2-margin-top : 2em;
    --article-h2-margin-bottom : .5em;

    --article-lead-size : 1.25em;
    --article-lead-margin-bottom : 1em;

    --article-p-margin-bottom : 2em;
    --article-li-margin-bottom : .5em;
    --article-li-links-margin-bottom : .5em;

    --article--block-padding : 1.5em;
    --article--media-margin : 2em;


    //Buttons

    --button-radius : 0px;
    --button-arrow:true;  //set to none if no arrow
    
    --button-transform: normal;
    --button-size:0.9em;
    --button-weight:500;


    //BANNERS:
    --banner-radius: 0px;
    --banner-padding:0px;
    --banner-border:none;
    --banner-box-shadow: none; //4px 5px 4px rgba(0,0,0,0.25);
 
    --banner-title-weight : 400;
    --banner-insert-transform: uppercase;
    --banner-insert-size:1em; //same as bannertext

    --grid-gap-mobile:4px;
    --grid-gap-grid:6px;
    --grid-gap-wide:12px;
    --grid-gap-wider:20px;  

    --grid-space1-grid:6px;
    --grid-space1-wide:10px;
    --grid-space1-wider:18px;  

    --grid-space2-grid:8px;
    --grid-space2-wide:15px;
    --grid-space2-wider:25px;  


    //MEDIA
    --media-border-radius:5px;

    --flexgallery-gap: 1px;
    --flexgallery-background: transparent;
    --flexgallery-border-radius: 8px;
    --flexgallery-item-border-radius: 0px;

    --lightbox-gap: .5em;


   //CARDS
   --cards-gap: 1em;

    --card-border-padding: 0px;
    --card-content-padding: 1em 0.75em .5em .75em;
    --card-border-radius: 5px; 
    --card-border-radius-media: 3; //radius - padding 
    --card-box-shadow:   0 1.5px 4px rgb(0 0 0 / 12%),  
                         0 1.5px 3px rgb(0 0 0 / 6%);

     --card-border: none; //eks. 4px solid;
     --card-border-color: none; //eks #333;


    // Possible for fixed imageformat on all cards (in cssgrid and flex) as alternative to set a cardformat--modifier
    /*
    --cards-media-aspect-ratio: 3/2;
    --cards-media-object-fit: contain;
    --cards-media-object-contain-position : center;
    --cards-media-object-contain-background: rgba(0,0,0,0.5);
    */

      


    //TEXTBOX
    --contentbox-border-radius: 4px;
    --contentbox-box-shadow : 0 0 2px rgba(0,0,0,0.25);
    --contentbox-border : none;
    --contentbox-inner-padding: 5px;


    --contentbox-font-size: clamp(16px,1.25vw,18px);
    --contentbox-title-size: 1.25em;  //of the size above
    --contentbox-title-weight:500;
   

}



/**OVERRIDE PR CUSTOMER -> customer-css-variables.css**/

.template {
    //--card-border-padding: 2px;

}