@use "variables";

/* Variables */

:root {
  --font-system-ui: system-ui, sans-serif;
  --font-transitional:
    Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --font-old-style:
    "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  --font-humanist:
    Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro,
    sans-serif;
  --font-geometric-humanist:
    Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --font-classical-humanist:
    Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
  --font-neo-grotesque:
    Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
    sans-serif;
  --font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
  --font-monospace-code:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --font-industrial:
    Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
  --font-rounded-sans:
    ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari,
    "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro,
    sans-serif;
  --font-slab-serif:
    Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small",
    serif;
  --font-antique:
    Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L",
    "Georgia Pro", Georgia, serif;
  --font-didone:
    Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen,
    serif;
  --font-handwritten:
    "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
}

@mixin heading-style($font-size, $font-weight) {
  font-style: normal;
  font-weight: $font-weight;
  font-size: $font-size;
  line-height: normal;
  letter-spacing: -0.075rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1.25rem 0;

  code {
    font-size: calc(1em - 0.8rem);
    letter-spacing: 0;
  }
}

p {
  margin: 1rem 0;

  &:last-of-type {
    margin: 1rem 0 0 0;
  }
}

h1 {
  margin: 2.0938rem 0;
  @include heading-style(3.125rem, 900);
}

h2 {
  @include heading-style(2.1875rem, 800);
}

h3 {
  @include heading-style(1.5625rem, 700);
}

h4 {
  @include heading-style(1.25rem, 600);
}

h5 {
  @include heading-style(1.125rem, 600);
}

h6 {
  @include heading-style(1rem, 600);
}

small {
  display: inline-block;
  color: var(--color-text-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6,
li,
p {
  overflow-wrap: break-word;
}

a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
  font-feature-settings: inherit;
  touch-action: manipulation;
  color: var(--color-text);
  font-family: inherit;
}

main {
  a {
    transition: text-decoration 0.3s ease transform 0.3s ease;
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: underline;

    &:hover {
      text-decoration: dotted underline;
    }

    &:active {
      transform: scale(0.9);
    }
  }
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-background);
}

:target {
  animation: highlight-in-out 800ms 0.4s;
  scroll-margin-top: 15vh;
  color: var(--color-accent);
  text-shadow:
    var(--color-background-second) 0 0 0.25rem,
    var(--color-accent) 0 0 0.75rem;

  @keyframes highlight-in-out {
    50% {
      color: var(--color-accent);
      font-style: italic;
      font-weight: bolder;
      letter-spacing: 0.25rem;
    }
  }
}

/* Miscellaneous */

button {
  cursor: pointer;
  @include variables.noBasicStyles;
}

abbr {
  cursor: help;
}

.no-underline a {
  text-decoration: none;
}
