/* dm-serif-display-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/dm-serif-display-v16-latin-regular.woff2') format('woff2');
}
/* dm-serif-display-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  src: url('../assets/fonts/dm-serif-display-v16-latin-italic.woff2') format('woff2');
}
/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/inter-v19-latin-regular.woff2') format('woff2');
}
/* inter-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('../assets/fonts/inter-v19-latin-italic.woff2') format('woff2');
}

:root{
  --primary: #FFFFFF;
  --secondary: #F5F5F5;
  --tertiary: #9E9E9E;
  --quaternary: #212121;
  --accent: #3F51B5;
  --accent-on-dark: #82B1FF;
  --primary-bg: var(--secondary);
  --footer-bg: var(--quaternary);
  --border-radius: 4px;

  --font-base-size: 1rem;     /* 16px */
  --font-sm: 0.7rem;        /* 14px */
  --font-md: 1rem;            /* 16px */
  --font-lg: 1.25rem;         /* 20px */
  --font-xl: 1.5rem;          /* 24px */
  --font-xxl: 2rem;           /* 32px */
  --line-height-base: 1.5;
  --line-height-tight: 1.3;
  --line-height-loose: 1.6;

  --font-display: 'DM Serif Display', serif;
  --font-body: 'Inter', sans-serif;
}
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-size: var(--font-base-size);
  line-height: var(--line-height-base);
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:active {
  color: var(--accent);
}
ul li {
  list-style: none;
}
p {
  margin-top: 0;
  margin-bottom: 0.7rem;
}
hr {
  margin: 1rem 0;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
  line-height: 1.2;
}
h3 {
  font-size: var(--font-xl);
}
h4 {
  font-size: var(--font-lg);
}

/* UTILITIES */
.hidden {
  display: none;
}
.text-center {
  text-align: center;
}
.font-md {
  font-size: var(--font-md);
}
.font-lg {
  font-size: var(--font-lg);
}
.font-xl {
  font-size: var(--font-xl);
}
.font-xxl {
  font-size: var(--font-xxl);
}