@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter/InterVariable.woff2) format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter/InterVariable-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url(/fonts/newsreader/Newsreader-Variable.woff2) format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url(/fonts/newsreader/Newsreader-Variable-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url(/fonts/roboto-mono/RobotoMono-Variable.ttf) format('truetype');
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url(/fonts/roboto-mono/RobotoMono-Variable-Italic.ttf) format('truetype');
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: 'DmSerifDisplay';
  src: url(/fonts/DM_Serif_Display/DMSerifDisplay-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DmSerifDisplay';
  src: url(/fonts/DM_Serif_Display/DMSerifDisplay-Italic.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Base Spacing */
:root {
  --base-spacing: 14px;
  --color-primary: #1a1a1a;
  --color-character-accent: #6f5a3f;
  --color-character-accent-rgb: 111, 90, 63;
  --color-notice-background: #f7edda;
  --color-notice-border: #ead6b3;
  --color-notice-text: #3f2f1e;
  --color-red: #b35555;
  --color-danger: #b35555;
  --color-highlight: yellow;
  --color-success: rgb(41, 107, 41);
  --form-radius: 6px;
  --button-radius: 6px;
  --color-box: white;
  --font-stack-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-stack-serif: 'Newsreader', Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-stack-monospace: 'Roboto Mono', monospace;

  --max-width: 900px;
}

/* Media Queries */
@media (max-width: 768px) {
  /* Mobile specific styles */
}

@media (min-width: 1024px) {
  /* Desktop specific styles */
}

@media (min-width: 768px) {
  /* Tablet specific styles */
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet-only specific styles */
}