:root {
  --bg: #fafafa;
  --ink: #2d3748;
  --muted: #4a5568;
  --text: #718096;
  --border: rgba(45, 55, 72, 0.1);
  --frame-gray: rgba(74, 85, 104, 0.28);
  --ease-archival: cubic-bezier(0.19, 1, 0.22, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../assets/fonts/OpenSans-VariableFont_wdthwght.ttf") format("truetype");
}

@font-face {
  font-family: "Trebuchet MS";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/trebuc.ttf") format("truetype");
}

@font-face {
  font-family: "SF Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/SFMonoRegular.otf") format("opentype");
}

.app {
  position: relative;
  height: 100vh;
  width: 100%;
}

/* Subtle Paper Texture Overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/textures/paper.png");
  opacity: 0.15;
  pointer-events: none;
  z-index: 100;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.snap {
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .snap {
    scroll-behavior: auto;
  }
}