@font-face {
  font-family: 'Bebas Neue Local';
  src: url('../assets/fonts/BebasNeue-Regular.eot');
  src: url('../assets/fonts/BebasNeue-Regular.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/BebasNeue-Regular.woff') format('woff'),
       url('../assets/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: var(--color-bg-main);
  color: var(--color-text);
  font-family: var(--font-headline);
  line-height: 1.4;
  letter-spacing: 0.01em;
  isolation: isolate;
}

.page-style-guide,
.page-news,
.page-bands,
.page-tickets {
  color: var(--color-text);
}

.page-home::before,
.page-style-guide::before,
.page-news::before,
.page-bands::before,
.page-tickets::before,
.page-program::before,
.page-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--color-bg-main);
  background-image: url("../assets/img/ui/bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  pointer-events: none;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 1px solid var(--scrollbar-thumb-border);
  border-radius: 8px;
}

/* Utility: margin & padding (Bootstrap-compatible scale) */
/* 1 = 0.25rem (4px), 2 = 0.5rem (8px), 3 = 1rem (16px) */
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.m-1  { margin: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }
.m-3  { margin: 1rem !important; }

.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }