@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 400;
  src:
    local('Encode Sans Semi Expanded'),
    local('Encode Sans');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 700;
  src:
    local('Encode Sans Semi Expanded Bold'),
    local('Encode Sans Semi Expanded'),
    local('Encode Sans');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 100;
  src:
    local('Encode Sans Condensed Thin'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 200;
  src:
    local('Encode Sans Condensed ExtraLight'),
    local('Encode Sans Condensed Extra Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
}

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 300;
  src:
    local('Encode Sans Condensed Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
}

:root {
  --color-active: #f90;
  --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
  --font-stretch-base: semi-expanded;
  --font-weight-base: 400;
  --line-height-base: 2;
  --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
  --font-stretch-headings: condensed;
  --font-weight-headings: 100;
  --line-height-headings: 1.5;
  --font-family-monospace: 'mononoki';
  --font-size-root: 16px;
  --color-negative: #222;
  --color-positive: #eee;
  --color-accent: #C78AB3;
  --opacity-light: 0.25;
  --opacity-lighter: 0.5;
  --opacity-lightest: 0.75;
}

:root {
  --color-bg: var(--color-negative, white);
  --color-fg: var(--color-positive, black);
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--font-size-root);
  font-family: var(--font-family-base), sans-serif;
  font-stretch: var(--font-stretch-base, normal);
  font-weight: var(--font-weight-base, 400);
  line-height: var(--line-height-base, 2);
}

h1 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h2 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h3 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h4 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h5 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

h6 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
}

a {
  color: var(--color-accent);
}

code {
  font-family: var(--font-family-monospace), monospace;
}

pre {
  font-family: var(--font-family-monospace), monospace;
}