/* Dopameez design system — foundation tokens, reset, and shared keyframes.
   Extracted verbatim from the Dope-Mart Experience landing page. Every page
   on the site loads this before anything else. */

html { scrollbar-width: none; scroll-behavior: smooth; }
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--paper, #E9E4D8);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink, #16130E);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button { font-family: inherit; }

:root {
  --acc: #FF5E3A;
  --ink: #16130E;
  --paper: #E9E4D8;
  --rad: 8px;

  /* extended palette used across the site (section backgrounds seen on the
     landing page's "note" and product-card sections) */
  --navy: #16202E;
  --navy-ink: #EFEBE2;
  --lime: #C6FF3A;
  --card-olive: #24211B;
  --card-black: #16130E;
}

@keyframes dz-marq { to { transform: translateX(-50%); } }
@keyframes dz-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.dz-cap { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; }
.acc { color: var(--acc); }

/* accessible, on-brand keyboard focus (replaces the default UA outline) */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}

/* visually-hidden until focused, for the skip-to-content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 8px;
  font: 600 13px 'Space Grotesk', sans-serif;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}