/**
 * @file Contains configuration variables
 */

 :root,
 .sv-theme-standardtema {
    /* Aurora colors */
    --color-cloud-10: #f5f6f7;
    --color-cloud-20: #ebeef0;
    --color-cloud-30: #d0d6db;
    --color-cloud-40: #a6b1ba;
    --color-cloud-50: #8b99a2;
    --color-cloud-60: #647078;
    --color-cloud-70: #48535c;
    --color-cloud-80: #303f4a;
    --color-cloud-90: #1b2b36;
    --color-cloud-100: #12212b;
    --color-sky-10: #def1ff;
    --color-sky-20: #b3dfff;
    --color-sky-30: #99d6ff;
    --color-sky-40: #74bced;
    --color-sky-50: #3b9cdf;
    --color-sky-60: #0c6bc4;
    --color-sky-70: #0054a6;
    --color-sky-80: #004591;
    --color-sky-90: #00367a;
    --color-sky-100: #002863;
    --color-wildfire-10: #fae7cd;
    --color-wildfire-20: #ffd3a1;
    --color-wildfire-30: #fbb060;
    --color-wildfire-40: #f69127;
    --color-wildfire-50: #eb7500;
    --color-wildfire-60: #ab4d00;
    --color-wildfire-70: #8c3d00;
    --color-wildfire-80: #782e00;
    --color-wildfire-90: #662500;
    --color-wildfire-100: #4f1a00;
    --color-ocean-10: #e0f5f3;
    --color-ocean-20: #bdebe8;
    --color-ocean-30: #75d2cc;
    --color-ocean-40: #49c1bb;
    --color-ocean-50: #1ea8a1;
    --color-ocean-60: #067a78;
    --color-ocean-70: #046666;
    --color-ocean-80: #035154;
    --color-ocean-90: #004047;
    --color-ocean-100: #002e33;
    --color-twilight-10: #f5ebff;
    --color-twilight-20: #e8d0fd;
    --color-twilight-30: #dfbdff;
    --color-twilight-40: #d09cff;
    --color-twilight-50: #b969ff;
    --color-twilight-60: #913ad7;
    --color-twilight-70: #7d24bf;
    --color-twilight-80: #68159f;
    --color-twilight-90: #510c78;
    --color-twilight-100: #37064f;
    --color-algae-10: #eafcd2;
    --color-algae-20: #b6ed8e;
    --color-algae-30: #72ca34;
    --color-algae-40: #54b514;
    --color-algae-50: #3da000;
    --color-algae-60: #2b7500;
    --color-algae-70: #206100;
    --color-algae-80: #184f00;
    --color-algae-90: #103d00;
    --color-algae-100: #0a2900;
    --color-sunlight-10: #ffffcc;
    --color-sunlight-20: #fffa94;
    --color-sunlight-30: #fdeb1b;
    --color-sunlight-40: #f0d700;
    --color-sunlight-50: #c9b200;
    --color-sunlight-60: #857100;
    --color-sunlight-70: #6b5900;
    --color-sunlight-80: #594600;
    --color-sunlight-90: #473700;
    --color-sunlight-100: #382b00;
    --color-heatwave-10: #ffebed;
    --color-heatwave-20: #ffcfd1;
    --color-heatwave-30: #ff99a0;
    --color-heatwave-40: #fc5f6a;
    --color-heatwave-50: #f82b37;
    --color-heatwave-60: #d61720;
    --color-heatwave-70: #b4070f;
    --color-heatwave-80: #930005;
    --color-heatwave-90: #610003;
    --color-heatwave-100: #380001;
    --color-warning-yellow-10: #fdffdb;
    --color-warning-yellow-20: #faff8c;
    --color-warning-yellow-30: #fcff40;
    --color-warning-yellow-40: #dcdc00;
    --color-warning-yellow-50: #9e9600;
    --color-warning-yellow-60: #857500;
    --color-warning-yellow-70: #7d6e00;
    --color-warning-yellow-80: #705f00;
    --color-warning-yellow-90: #6b5600;
    --color-warning-yellow-100: #5e4a00;
    --color-warning-orange-10: #fff3eb;
    --color-warning-orange-20: #ffe1cf;
    --color-warning-orange-30: #ffbd99;
    --color-warning-orange-40: #fc915f;
    --color-warning-orange-50: #f8652b;
    --color-warning-orange-60: #cb3e0b;
    --color-warning-orange-70: #b63007;
    --color-warning-orange-80: #9e2200;
    --color-warning-orange-90: #7a1800;
    --color-warning-orange-100: #4d0e00;
    --color-warning-red-10: #ffebec;
    --color-warning-red-20: #ffcfd4;
    --color-warning-red-30: #ff99a7;
    --color-warning-red-40: #fc5f79;
    --color-warning-red-50: #fc3c63;
    --color-warning-red-60: #d51847;
    --color-warning-red-70: #bb073a;
    --color-warning-red-80: #93002f;
    --color-warning-red-90: #61001f;
    --color-warning-red-100: #47001a;

    --color-horizon-10: rgba(240, 248, 255, 1);
    --color-horizon-100: rgba(2, 36, 64, 1);

    --color-zenith: #ffffff;
    --color-nadir: #0d1921;

    /* Font stacks */
    --font-family-text: var(--env-font-family); /* notosans,helvetica,sans-serif; */
    --font-family-heading: smhisans, notosans, helvetica, arial, sans-serif;
     
    /* Layout variables */
    --document-background-color: var(--color-cloud-10);
    --header-background-color: transparent; /* Same as document background */
    --main-background-color: var(--color-zenith);
    --footer-background-color: transparent; /* Same as document background */
    --breadcrumbs-background-color: var(--document-background-color);
    --max-text-content-width: 40rem;
    --mobile-content-spacing: 1rem; /* Spacing from viewport to Text */

   --desktop-side-spacing: 1.5rem;
   --tablet-side-spacing: 2rem;
   --mobile-side-spacing: 1rem;
   --grid-width: 80rem;
   --max-big-text-content-width: 45rem;
   --max-character-width: 75ch;
 
    /*   States variables  */
    --outline-offset-inside: calc(-1 * var(--env-focus-size));
 
    /*		Transition variables		*/
   --standard-animation: all .3s ease-in-out;
   --bg-and-typocolor-animation: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out ;

   /*    Overwrite for aurora    */
   letter-spacing: normal!important;

}
 
 .smhi-component--darkmode {
    
    --color-cloud-100: #f5f6f7;
    --color-cloud-90: #ebeef0;
    --color-cloud-80: #d0d6db;
    --color-cloud-70: #a6b1ba;
    --color-cloud-60: #8b99a2;
    --color-cloud-50: #647078;
    --color-cloud-40: #48535c;
    --color-cloud-30: #303f4a;
    --color-cloud-20: #1b2b36;
    --color-cloud-10: #12212b;
    
    --color-sky-100: #def1ff;
      --color-sky-90: #b3dfff;
    --color-sky-80: #99d6ff;
    --color-sky-70: #74bced;
    --color-sky-60: #3b9cdf;
    --color-sky-50: #0c6bc4;
    --color-sky-40: #0054a6;
    --color-sky-30: #004591;
    --color-sky-20: #00367a;
    --color-sky-10: #002863;
    
    --color-wildfire-100: #fae7cd;
    --color-wildfire-90: #ffd3a1;
    --color-wildfire-80: #fbb060;
    --color-wildfire-70: #f69127;
    --color-wildfire-60: #eb7500;
    --color-wildfire-50: #ab4d00;
    --color-wildfire-40: #8c3d00;
    --color-wildfire-30: #782e00;
    --color-wildfire-20: #662500;
    --color-wildfire-10: #4f1a00;
    
    --color-heatwave-100: #ffebed;
    --color-heatwave-90: #ffcfd1;
    --color-heatwave-80: #ff99a0;
    --color-heatwave-70: #fc5f6a;
    --color-heatwave-60: #f82b37;
    --color-heatwave-50: #d61720;
    --color-heatwave-40: #b4070f;
    --color-heatwave-30: #930005;
    --color-heatwave-20: #610003;
    --color-heatwave-10: #380001;

    --color-horizon-100: rgba(240, 248, 255, 1);
    --color-horizon-10: rgba(2, 36, 64, 1);
 
    --color-zenith: #0d1921;
    --color-nadir: #ffffff;
 }