@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#F5F1E8;          /* warm off-white, geen puur wit */
  --ink-soft:#B8B0A0;
  --paper:#101010;         /* bijna-zwart, licht warm */
  --surface:#1A1A1A;
  --surface-raised:#212121;
  --line:#333333;
  --accent:#FF5A1F;        /* gedurfd oranje, zoals hun affiches */
  --accent-deep:#D6440F;
  --gold:#F2B705;
  --good:#4ADE80;
  --good-soft:#12291C;
  --bad:#FF4D4D;
  --bad-soft:#2B1414;
  --radius:18px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  user-select:none;
}

.display-font{
  font-family:'Anton',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  outline:none;
}
button:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

::-webkit-scrollbar{display:none;}

.shop-tag{
  position:fixed;
  top:16px;
  left:20px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  z-index:5;
}
.shop-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft);}

/* subtiele grunge-textuur op de achtergrond, zoals een festivalaffiche */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}