/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* AKKURAT */

/* Normal */
@font-face {
  font-family: "Akkurat";
  src: url(/dist/static/AkkuratPro-Regular.ccfd0dbe1e91854d64d2..woff2) format("woff2"),
       url(/dist/static/AkkuratPro-Regular.ed73ba54d3326bfce8cf..woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Akkurat";
  src: url(/dist/static/AkkuratPro-Italic.8a22baeec4e87b8faa39..woff2) format("woff2"),
       url(/dist/static/AkkuratPro-Italic.295a84bf5fba60b45f1e..woff) format("woff");
  font-weight: 400;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: "Akkurat";
  src: url(/dist/static/AkkuratPro-Light.d2e523ef008c891a0260..woff2) format("woff2"),
       url(/dist/static/AkkuratPro-Light.2ad4a2c92a4dcfb5fe0e..woff) format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Akkurat";
  src: url(/dist/static/AkkuratPro-LightItalic.7018e3c355133895cb36..woff2) format("woff2"),
       url(/dist/static/AkkuratPro-LightItalic.8d7f0989a07b066ef8c8..woff) format("woff");
  font-weight: 300;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: "Akkurat";
  src: url(/dist/static/AkkuratPro-Bold.a24cebf601fb4edb9682..woff2) format("woff2"),
       url(/dist/static/AkkuratPro-Bold.69ab829a703bbb1e412a..woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Akkurat";
  src: url(/dist/static/AkkuratPro-BoldItalic.92ac729ce04e7090281d..woff2) format("woff2"),
       url(/dist/static/AkkuratPro-BoldItalic.9e4a0a9adf22fbacc232..woff) format("woff");
  font-weight: 700;
  font-style: italic;
}


/* CIRCULAR */
/* Normal */
@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-Book.1f1f0b7a337d291e40d2..woff2) format("woff2"),
       url(/dist/static/CircularStd-Book.21a2c3d36dbaade80e2c..woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-BookItalic.7f0cc93da168bcfba041..woff2) format("woff2"),
       url(/dist/static/CircularStd-BookItalic.cf3114ce9a673073b03b..woff) format("woff");
  font-weight: 400;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-Medium.2858431679b815919f95..woff2) format("woff2"),
       url(/dist/static/CircularStd-Medium.1dd319b87a915b106596..woff) format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-MediumItalic.5124650afdc28e9dca30..woff2) format("woff2"),
       url(/dist/static/CircularStd-MediumItalic.9f00d60feb0e0401d7a1..woff) format("woff");
  font-weight: 500;
  font-style: italic;
}

/* Bolder */
@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-Bold.fb72b487cf867b50d2cb..woff2) format("woff2"),
       url(/dist/static/CircularStd-Bold.b0808321079afca2aa34..woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-BoldItalic.cb6e33bb3eee54a01841..woff2) format("woff2"),
       url(/dist/static/CircularStd-BoldItalic.c44d2fdecc94959d073c..woff) format("woff");
  font-weight: 700;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-Black.1b79f316c2ea9ff50934..woff2) format("woff2"),
       url(/dist/static/CircularStd-Black.fb41e6016c1193d0fc7b..woff) format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Circular";
  src: url(/dist/static/CircularStd-BlackItalic.9a3ad909f85265c05948..woff2) format("woff2"),
       url(/dist/static/CircularStd-BlackItalic.6864f6d37a96502c3cf3..woff) format("woff");
  font-weight: 900;
  font-style: italic;
}


/* Nunito */
/* Normal */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-Regular.9d7a6e03c6e3ed49c7ac..ttf) format("ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-Italic.cedc8a593d8ba361dcf4..ttf) format("ttf");
  font-weight: 400;
  font-style: italic;
}

/* Extra Light */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-ExtraLight.7a2537334c29ba1202c0..ttf) format("ttf");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-ExtraLightItalic.d44c92d68719834c1489..ttf) format("ttf");
  font-weight: 200;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-Light.677d4143aa9440e30cad..ttf) format("ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-LightItalic.ca201d64de8052bd347b..ttf) format("ttf");
  font-weight: 300;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-Medium.06740446a9f13288701b..ttf) format("ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-MediumItalic.3241228fab2414cc8e11..ttf) format("ttf");
  font-weight: 500;
  font-style: italic;
}

/* Semi Bold */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-SemiBold.ae592fe018d712c287a2..ttf) format("ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-SemiBoldItalic.504e24b6e9e3b9789bbb..ttf) format("ttf");
  font-weight: 600;
  font-style: italic;
}

/* Bolder */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-Bold.275dd55e10ba966bcb9b..ttf) format("ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-BoldItalic.2ec81cb007530188a403..ttf) format("ttf");
  font-weight: 700;
  font-style: italic;
}

/* Extra Bold */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-ExtraBold.7415babff1752bd4ea44..ttf) format("ttf");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-ExtraBoldItalic.fa54ce9456f46eca2b6d..ttf) format("ttf");
  font-weight: 800;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-Black.39982299ea6219343d60..ttf) format("ttf");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url(/dist/static/Nunito-BlackItalic.3ff0348c21ce8b2ba469..ttf) format("ttf");
  font-weight: 900;
  font-style: italic;
}

/*
  All variables should be named using BEM structure: --block__element--modifier
  See: http://getbem.com/naming for details.
*/

:root,
[module='palette'] {
  /* BASE PALLETTE */
  --wt-red-60: #FE8D6C;
  --wt-red-30: #D96E55;
  --wt-red-20--BRAND-RESERVED: #F9461C;
  --wt-red-10: #C93217;
  
  --wt-green-80--BRAND-RESERVED: #3DCD58;
  --wt-green-70: #43D787;
  --wt-green-50: #6FB991;
  --wt-green-40:	#3DCD58;
  --wt-green-30:	#24B43F;
  --wt-green-20:	#0A9A25;
  --wt-green-10:	#009530;

  --wt-skyBlue-40: #42B4E6;
  --wt-skyBlue-30: #299BCD;
  --wt-skyBlue-20: #0087CD;
  --wt-skyBlue-10: #0F81B3;

  --wt-orange-50: #ECB671;
  --wt-orange-40: #ECBA74;
  --wt-orange-30: #F8C800;
  --wt-orange-20: #FFA037;
  --wt-orange-25: #FFB602;
  --wt-orange-15: #F9950A;
  --wt-orange-10: #E47F00;

  --wt-blue-70: #5593D5;
  --wt-blue-60: #2185D0;
  --wt-blue-50: #006BF7;
  --wt-blue-40: #004FB8;
  --wt-blue-35: #14408E;
  --wt-blue-30: #042866;

  --wt-teal-50: #2BA8B8;
  --wt-teal-40: #207D89;

  --wt-violet-50: #901CFC;
  --wt-violet-40: #612183;

  --wt-grayscale-00: black;
  --wt-grayscale-10: #191919;
  --wt-grayscale-20: #0F0F0F;
  --wt-grayscale-30: #707070;
  --wt-grayscale-40: #B7B7B7;
  --wt-grayscale-50: #D8D8D8;
  --wt-grayscale-60: #f7f7f7;
  --wt-grayscale-70: #F4F4F4;
  --wt-grayscale-100: white;

  --wt-alpha--dark-10: rgba(160,158,158,0.1);
  --wt-alpha--dark-25: rgba(160,158,158,0.25);
  --wt-alpha--dark-70: rgba(160,158,158,0.7);

  --wt-alpha--light-10: rgba(255,255,255,0.1);
  --wt-alpha--light-45: rgba(255,255,255,0.45);

  /*--wt-white: white;*/
  --wt-transparent: rgba(255,255,255,0);

  /* START OF NEW PALLETE */

  /* GREYS */
  --wt-white:         #FFFFFF;
  --wt-lightGrey:     #f4f4f4;
  --wt-lightishGrey:  #d8d8d8;
  --wt-grey:          #B7B7B7;
  --wt-warmGreyTwo:   #A09E9E;
  --wt-warmGrey:      #707070;
  --wt-graphGrey:     #474747;
  --wt-blackTwo:      #353535;
  --wt-black:         #191919;
  --wt-blackout:      #000000;
  
  /* COOL COLORS */
  --wt-clouds:        #ECF8FA;
  --wt-dawn:          #D1EBEF;
  --wt-morning:       #A1BDE3;
  --wt-clearSky:      #5593D5;
  --wt-rainyDay:      #3C6999;
  --wt-twilight:      #14408E;
  --wt-blueHour:      #133A7E;
  --wt-dusk:          #042866;
  --wt-sundown:       #14408E;
  --wt-midnight:      #021940;

  /* WARM COLORS */
  --wt-horizon:       #F9F1EA;
  --wt-goldenHour:    #FFEAAF;
  --wt-sunbeam:       #FFCE69;
  --wt-brightDay:     #FFB705;
  --wt-sunburst:      #E42B14;
  --wt-senseOrange:   #F9461C;

  /* THIS SHOULD MOVE TO variables.css WHEN
  COMPONENTS USING IT MOVE TO PRODUCTION */
  --wt-error:         #EA000E;
}
body {
  color: var(--wt-font-color--primary);
  background-color: var(--wt-app__background);
}

::selection {
  background: var(--wt-primary-color);
  color: var(--wt-font-color--invert);
}

a { color: var(--wt-skyBlue-40) }
a:visited { color: var(--wt-skyBlue-30) }

/* DEFAULT */
:root,
[wt_theme="red"],
[wt_theme="pride"],
[module="theme--red"] {
  --wt-primary-color:           var(--wt-green-80--BRAND-RESERVED);
  --wt-primary-color--active:   var(--wt-green-10);
  --wt-input-color:             var(--wt-neutralGray-30);
  --wt-input-label:             var(--wt-grayscale-00);
  --wt-input-color--active:     var(--wt-brightDay);
  --wt-input__field-text:       var(--wt-neutralGray-60);
  --wt-input__field-icon:       var(--wt-neutralGray-40);
  --wt-select__field-icon:      var(--wt-grayscale-00);
  --wt-knob-color--disabled:    var(--wt-white);
  --wt-graph-color--primary:    var(--wt-green-70);
  --wt-solar-color:             var(--wt-orange-25);
  --wt-battery-charging:        var(--wt-green-80--BRAND-RESERVED);
  --wt-battery-discharging:     var(--wt-orange-15);
}

/* BLUE */
[wt_theme="blue"],
[module="theme--blue"] {
  --wt-primary-color:           var(--wt-blue-40);
  --wt-primary-color--active:   var(--wt-blue-50);
  --wt-graph-color--primary:    var(--wt-primary-color);
  --wt-solar-color:             var(--wt-orange-20);
  --wt-battery-charging:        var(--wt-green-80--BRAND-RESERVED);
  --wt-battery-discharging:     var(--wt-orange-15);
}
[wt_theme="blue"][wt_mode="dark"] {
  --wt-primary-color:           var(--wt-blue-50);
  --wt-primary-color--active:   var(--wt-blue-40);
}

/* PURPLE */
[wt_theme="purple"],
[module="theme--purple"] {
  --wt-primary-color:           var(--wt-violet-40);
  --wt-primary-color--active:   var(--wt-violet-50);
  --wt-graph-color--primary:    var(--wt-primary-color);
  --wt-solar-color:             var(--wt-orange-50);
  --wt-battery-charging:        var(--wt-green-80--BRAND-RESERVED);
  --wt-battery-discharging:     var(--wt-orange-15);
}
[wt_theme="purple"][wt_mode="dark"] {
  --wt-primary-color:           var(--wt-violet-50);
  --wt-primary-color--active:   var(--wt-violet-40);
}

/* TEAL */
[wt_theme="teal"],
[module="theme--teal"] {
  --wt-primary-color:           var(--wt-teal-40);
  --wt-primary-color--active:   var(--wt-teal-50);
  --wt-graph-color--primary:    var(--wt-primary-color);
  --wt-solar-color:             var(--wt-orange-30);
  --wt-battery-charging:        var(--wt-green-80--BRAND-RESERVED);
  --wt-battery-discharging:     var(--wt-orange-15);
}
[wt_theme="teal"][wt_mode="dark"] {
  --wt-primary-color:           var(--wt-teal-50);
  --wt-primary-color--active:   var(--wt-teal-40);
}

/* WISER */
[wt_theme="wiser"],
[module="theme--wiser"] {
  --wt-primary-color:           var(--wt-green-10);
  --wt-primary-color--active:   var(--wt-green-30);
  --wt-graph-color--primary:    var(--wt-primary-color);
  --wt-solar-color:             var(--wt-orange-25);
  --wt-battery-charging:        var(--wt-green-10);
  --wt-battery-discharging:     var(--wt-orange-10);
}
[wt_theme="wiser"][wt_mode="dark"] {
  --wt-primary-color:           var(--wt-green-30);
  --wt-primary-color--active:   var(--wt-green-10);
}

:root,
[wt_mode="light"],
[module="mode--light"] {
  --wt-app__background:         var(--wt-grayscale-60);
  --wt-card__background:        var(--wt-grayscale-100);
  --wt-item__border-color:      var(--wt-alpha--dark-25);
  --wt-item__overlay:           var(--wt-alpha--light-45);
  --wt-input-color--disabled:   var(--wt-lightGrey);
  --wt-input__field-background: var(--wt-lightGrey);
  --wt-notification__title:     var(--wt-sunburst);
  --wt-notification__close:     var(--wt-grayscale-30);
  --wt-notification__background: var(--wt-white);

  /* Temporary CSS Variables for Home & Device Survey */
  --survey-subheader:           var(--wt-warmGrey);
  --survey-label:               var(--wt-blackTwo);
  --survey-label__desc:         var(--wt-warmGrey);
  --survey-label__desc-selected:  var(--wt-warmGrey);
  --survey-input__border:       var(--wt-grey);
  --survey-input__border-selected:  var(--wt-senseOrange);
  --survey-button-tertiary:     var(--wt-warmGrey);
  --survey-input__field:        var(--wt-lightGrey);
  --survey-input__field-selected: var(--wt-horizon);
  --survey-incrementor__button: var(--wt-sunburst);
  --survey-card__background:    var(--wt-white);
}

[wt_mode="dark"],
[module="mode--dark"] {
  --wt-app__background:         var(--wt-grayscale-10);
  --wt-card__background:        var(--wt-grayscale-20);
  --wt-card__background-new:    var(--wt-midnight);
  --wt-item__border-color:      var(--wt-alpha--dark-25);
  --wt-item__overlay:           var(--wt-alpha--light-10);

  /* Hack to isolate the new Dark Mode color to the new inputs */
  --wt-input-color:             var(--wt-twilight);
  --wt-input-label:             var(--wt-clouds);
  --wt-input-color--disabled:   var(--wt-blueHour);
  --wt-knob-color--disabled:    var(--wt-rainyDay);
  --wt-input__field-background: var(--wt-blueHour);
  --wt-input__field-text:       var(--wt-clearSky);
  --wt-input__field-icon:       var(--wt-clearSky);
  --wt-select__field-icon:      var(--wt-clearSky);
  --wt-notification__title:     var(--wt-morning);
  --wt-notification__close:     var(--wt-morning);
  --wt-notification__background: var(--wt-dusk);

  /* Temporary CSS Variables for Home & Device Survey */
  --survey-subheader:           var(--wt-warmGreyTwo);
  --survey-label:               var(--wt-white);
  --survey-label__desc:         var(--wt-warmGreyTwo);
  --survey-label__desc-selected:  var(--wt-lightishGrey);
  --survey-input__border:       var(--wt-white);
  --survey-input__border-selected:  var(--wt-senseOrange);
  --survey-button-tertiary:     var(--wt-white);
  --survey-input__field:        var(--wt-blackTwo);
  --survey-input__field-selected: var(--wt-graphGrey);
  --survey-incrementor__button: var(--wt-senseOrange);
  --survey-card__background:    var(--wt-blackout);
}

/*
  All variables should be named using BEM structure: --block__element--modifier
  See: http://getbem.com/naming for details.
*/

:root,
[wt_theme="blue"],
[wt_theme="red"],
[wt_theme="teal"],
[wt_theme="purple"],
[wt_theme="wiser"],
[wt_mode="dark"],
[wt_mode="light"] {
  /* Buttons */
  --wt-button__text:                          var(--wt-font-color--invert);
  --wt-button__background:                    var(--wt-primary-color);
  --wt-button__background--active:            var(--wt-primary-color--active);
  --wt-button__border:                        var(--wt-primary-color);
  --wt-button__border--active:                var(--wt-primary-color--active);

  --wt-button--secondary__text:               var(--wt-primary-color);
  --wt-button--secondary__text--active:       var(--wt-primary-color--active);
  --wt-button--secondary__background:         var(--wt-transparent);
  --wt-button--secondary__background--active: var(--wt-alpha-gray--10);
  --wt-button--secondary__border:             var(--wt-primary-color);
  --wt-button--secondary__border--active:     var(--wt-primary-color--active);

  --wt-disabled__color:                       var(--wt-grayscale-50);

  /* Comparison */
  --wt-compare__color--low:                   var(--wt-green-20);
  --wt-compare__color--medium:                var(--wt-orange-15);
  --wt-compare__color--high:                  var(--wt-red-30);

  /* Message Levels */
  --wt-info__color:                           var(--wt-clearSky);
  --wt-success__color:                        var(--wt-green-50);
  --wt-error__color:                          var(--wt-red-30);
  --wt-warn__color:                           var(--wt-orange-40);

  /* Focus */
  --wt-focus-shadow:                          0 0 0px 2px var(--wt-font-color--primary);

  /* List Items */
  --wt-list__background:                      var(--wt-transparent);
  --wt-list__background--active:              var(--wt-alpha-light--10);
  --wt-list__border:                          var(--wt-alpha--dark-10);
}

@keyframes pulse {
  0% { opacity: 0.38 }
  50% { opacity: 0.9 }
  100% { opacity: 0.38 }
}

@keyframes shake {
  20% { transform: translate3d(-1px, 0, 0) }
  40% { transform: translate3d(2px, 0, 0) }
  60% { transform: translate3d(-4px, 0, 0) }
  80% { transform: translate3d(4px, 0, 0) }
}

@keyframes countup {
  0% { width: 0% }
  100% { width: 100% }
}
/* Body Defaults */
body {
  margin: 0;
  padding: 0;
}

/* Font Smoothing */
body {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

hr {
  border: unset;
  border-top: 1px solid var(--wt-item__border-color);
  margin-bottom: 0.75em;
}


/*
  All variables should be named using BEM structure: --block----element--modifier
  See: http://getbem.com/naming for details.
*/

/*
  Elevation borrowed from Material design
  https://material.io/design/color/dark-theme.html#properties
*/

:root {
  --wt-gutter--0: 0em;
  --wt-gutter--1: 1.25rem;

  --wt-elevation-0--dark: rgba(255, 255, 255, 0);
  --wt-elevation-1--dark: rgba(255, 255, 255, 0.05);
  --wt-elevation-2--dark: rgba(255, 255, 255, 0.08);
  --wt-elevation-3--dark: rgba(255, 255, 255, 0.11);
  --wt-elevation-4--dark: rgba(255, 255, 255, 0.14);
  --wt-elevation-5--dark: rgba(255, 255, 255, 0.16);

  --wt-elevation-0--light: 0 0 0 rgba(0, 0, 0, 0);
  --wt-elevation-1--light: 0 1px 3px rgba(0, 0, 0, 0.12);
  --wt-elevation-2--light: 0 3px 6px rgba(0, 0, 0, 0.16);
  --wt-elevation-3--light: 0 10px 20px rgba(0, 0, 0, 0.19);
  --wt-elevation-4--light: 0 14px 28px rgba(0, 0, 0, 0.25);
  --wt-elevation-5--light: 0 19px 38px rgba(0, 0, 0, 0.30);
  --wt-notification__shadow: 0px 8px 20px -12px rgba(0, 0, 0, 0.14), 0px 2px 20px 0px rgba(0, 0, 0, 0.06);

  --wt-z-index--0: 000;
  --wt-z-index--1: 100;
  --wt-z-index--2: 200;
  --wt-z-index--3: 300;
  --wt-z-index--4: 400;
  --wt-z-index--5: 500;
  --wt-z-index--6: 600;
  --wt-z-index--7: 700;
  --wt-z-index--8: 800;
  --wt-z-index--9: 900;
  --wt-z-index--10: 1000;
  --wt-z-index--11: 1100;
}
/* Variables */
:root,
[module="typography"] {
  --wt-font: "Nunito", Helvetica, Arial, sans-serif;
  --wt-font--number: "Akkurat", Helvetica, Arial, sans-serif;

  --wt-font-size--primary: 17px;
  --wt-font-size--secondary: 16px;
  --wt-font-size--tertiary: 14px;

  --wt-font-weight--extralight: 200;
  --wt-font-weight--light: 300;
  --wt-font-weight--normal: 400;
  --wt-font-weight--medium: 500;
  --wt-font-weight--semibold: 600;
  --wt-font-weight--bold: 700;
  --wt-font-weight--extrabold: 800;
  --wt-font-weight--black: 900;
}

:root,
[wt_mode="light"] {
  --wt-font-color--primary:     var(--wt-grayscale-20);
  --wt-font-color--secondary:   var(--wt-grayscale-30);
  --wt-font-color--tertiary:    var(--wt-grayscale-40);
  --wt-font-color--invert:      var(--wt-grayscale-100);
}

[wt_mode="dark"] {
  --wt-font-color--primary:     var(--wt-grayscale-100);
  --wt-font-color--secondary:   var(--wt-grayscale-30);
  --wt-font-color--tertiary:    var(--wt-grayscale-40);
  --wt-font-color--invert:      var(--wt-grayscale-00);
}

body {
  font-family: var(--wt-font);
  font-size: var(--wt-font-size--primary);
  font-weight: var(--wt-font-weight--normal);
  line-height: 1.4285em;
}

/* TEXT */
.primary,
a.primary {
  color: var(--wt-font-color--primary);
  font-size: var(--wt-font-size--primary);
}

.secondary,
a.secondary {
  color: var(--wt-font-color--secondary);
  font-size: var(--wt-font-size--secondary);
}

.tertiary,
a.tertiary {
  color: var(--wt-font-color--tertiary);
  font-size: var(--wt-font-size--tertiary);
}

.number,
a.number {
  font-family: var(--wt-font--number)
}

/* HEADERS */
h1,h2,h3,h4,h5,h6 {
  margin-top: 1em;
  margin-bottom: 0.65em;
}

h1 {
  font-weight: var(--wt-font-weight--medium);
  color: var(--wt-font-color--primary);
  font-size: 32px;
  line-height: 41px;
}

h2 {
  font-weight: var(--wt-font-weight--bold);
  color: var(--wt-font-color--primary);
  font-size: 20px;
  line-height: 25.3px;
}

h3 {
  font-weight: var(--wt-font-weight--medium);
  color: var(--wt-font-color--tertiary);
  font-size: 16px;
  line-height: 24px;
}

h4 {
  font-weight: var(--wt-font-weight--medium);
  color: var(--wt-font-color--tertiary);
  font-size: 13px;
  line-height: 14px;
}

h5 {
  font-weight: var(--wt-font-weight--medium);
  color: var(--wt-font-color--primary);
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
}

p {
  margin-bottom: 1em;
}