// FONT IMPORTS
//

@font-face {
  src: url('https://hellogreg.github.io/firava/fonts/Firava.woff2') format('woff2-variations');
  font-display: swap;
  font-family: 'firava';
  font-weight: 100 900;
}

@font-face {
  src: url('https://hellogreg.github.io/firava/fonts/FiravaItalic.woff2') format('woff2-variations');
  font-display: swap;
  font-family: 'firava';
  font-style: italic;
  font-weight: 100 900;
}

// SASS VARS AND MIXINS
//

@mixin darkmode-vars {

  body {
    --hgFocusColor: #ee7022;
    --hgHighlightColor: #ffee9900;

    --background-color: #181a22;
    --color: #fefefe;
  }

  pre, code, blockquote, summary {
    --background-color: #2b2d35;
  }

  a:link {
    --color: #8089ff;
  }

  a:visited {
    --color: #ab79ff;
  }

  a:hover {
    --color: #11ac11;
  }

  a:active, a:focus {
    --color: #ee7022;
  }
}


// MEDIA QUERIES AND JAVASCRIPT HOOKS
//

@media (min-width: 700px) {
  :root {
    --font-size-base: 137.5%;
    --slider-width: 10rem;
  }
}

:root {
  --font-weight-sample: 400;
}

.darkmode {
  @include darkmode-vars;
}

.italicized {
  --font-style: italic;
}


// DEFAULT SITE STYLES
//

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body, h1, h2, h3, h4, h5, h6, p, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
}

html {
  font-size: var(--font-size-base, 100%); // In case clamp isn't supported.
  font-size: calc(clamp(1em, .5em + 1vw, 2em));
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--background-color, #fff);
  color: var(--color, #222);
  font-family: "firava", "system-ui", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

input[type=range] {
  width: var(--slider-width, 6rem);
}

label {
  margin-right: 1rem;
  user-select: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a:link {
  color: var(--color, #04e);
}

a:visited {
  color: var(--color, #a0a);
}

a:hover {
  color: var(--color, #070);
}

a:active, a:focus {
  color: var(--color, #c05700);
}

header, footer, main {
  margin: 0 auto;
  max-width: 66ch;
  width: 96vw;
}

h1, h2 {
  font-style: normal;
}

h1 {
  font-weight: 800;
}

h2 {
  border-bottom: 1px solid #999;
  color: #6f6f6f;
  font-size: .75rem;
  font-weight: 500;
  margin-bottom: .5rem;
  margin-top: 2em;
  text-transform: uppercase;
}

h3 {
  font-size: 1.75rem;
}

p {
  margin-bottom: 1rem;
}

.overview p {
  margin-top: 1rem;
}

#controls {
  //background: #fed;
  display: flex;
  flex-wrap: wrap;
  padding: .25rem;

  > * {
    align-self: flex-end; // aligns text in firefox.
  }
}

.slidelabel {
  margin-right: .5rem;
}

#slidevalue {
  background-color: #fe14;
  font-weight: 500;
  margin-left: .5rem;
  padding: 0 .125rem;
}

h3, .samples p {
  font-style: var(--font-style, normal);
  font-weight: var(--font-weight-sample, 400);
}

p.charmap {
  letter-spacing: .2ch;
}

*:focus {
  outline: 2px dotted #c05700;
}

a.skip:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}