/* ===== GLOBAL STYLES ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --ink: #1a1008;
  --paper: #fdf6e3;
  --cream: #f5e6c8;
  --panel: #fff9ee;
  --yellow: #f7c948;
  --orange: #e8541a;
  --red: #c0392b;
  --teal: #2a7a6b;
  --blue: #1b4f8a;
  --green: #3a7d44;
  --purple: #6b3fa0;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --border: 3px solid var(--ink);
  --border-thick: 4px solid var(--ink);

  --font-display: 'Bangers', cursive;
  --font-body: 'Nunito', sans-serif;
  --font-hand: 'Patrick Hand', cursive;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  /* Halftone dot pattern */
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--cream);
  border-left: 2px solid var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--ink);
}

/* Utility classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}


/*# sourceMappingURL=main.42542ae319831b60f512.css.map*/