/* Typography - Font Faces */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/dm-serif-display/dm-serif-display-400.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/dm-sans/dm-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/fonts/dm-sans/dm-sans-500.woff2') format('woff2');
}

/* Typography - CSS Variables */
:root {
  --font-headings: 'DM Serif Display', Georgia, serif;
  --font-headings-weight: 400;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body-weight: 400;
  --font-captions: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-captions-weight: 400;
  --font-navigation: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-navigation-weight: 500;
}

/* Typography - Applied Styles */
h1, h2, h3, h4, h5, h6, .site-title, .album-title, .page-title {
  font-family: var(--font-headings) !important;
  font-weight: var(--font-headings-weight) !important;
}

body, p, .album-description, .page-content, .bio-text {
  font-family: var(--font-body) !important;
  font-weight: var(--font-body-weight) !important;
}

.caption, .image-caption, .exif-data, .metadata, figcaption {
  font-family: var(--font-captions) !important;
  font-weight: var(--font-captions-weight) !important;
}

nav, .nav-link, .menu-item, .btn, button {
  font-family: var(--font-navigation) !important;
  font-weight: var(--font-navigation-weight) !important;
}