/**
 * Typography styles
 */

/* Greeble - variable sans-serif (wght 100-900, ital 0-1).
   Two faces, same file: a single `font-style: normal italic` face makes
   Safari apply the ital axis AND a synthetic oblique on top. */
@font-face {
    font-family: 'Greeble';
    src: url('../assets/fonts/GreebleVF.woff2') format('woff2'),
         url('../assets/fonts/GreebleVF.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greeble';
    src: url('../assets/fonts/GreebleVF.woff2') format('woff2'),
         url('../assets/fonts/GreebleVF.woff') format('woff');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-body: 'Greeble', system-ui, sans-serif;
    --font-heading: 'Greeble', system-ui, sans-serif;
    font-feature-settings: "ss02" 1, "liga" 1, "lnum" 1;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-color);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-color);
  margin: 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 500;
}

p {
  margin: 0 0 var(--spacer-3);
}

p:last-child {
  margin-bottom: 0;
}

small {
  font-size: 0.875rem;
  color: var(--text-muted);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Form inputs and buttons use sans-serif */
input,
textarea,
select,
button,
.btn {
    font-family: var(--font-heading);
}

::selection {
    background: var(--theme-200);
    color: var(--theme-900);
}

@media (prefers-color-scheme: dark) {
    ::selection {
        background: var(--theme-800);
        color: var(--theme-100);
    }
}