/* ============================================================
   PIFF DISPENSARY — BASE / RESET & SHARED PRIMITIVE CLASSES
   Piff Stixs foundation helpers + the NY layer helpers.
   ============================================================ */

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

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-strong);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pd-flame-yellow); color: var(--ps-black); }

/* ---- Display / heading helpers ---- */
.ps-display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; }
.ps-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; }
.ps-script { font-family: var(--font-script); font-weight: 400; }

/* ---- Gold foil text fill (Piff Stixs prestige) ---- */
.ps-foil-text { background: var(--ps-gold-foil-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps-holo-surface { background: var(--ps-holo); }

/* ---- NY layer: flame text fill (dispensary heat) ---- */
.pd-flame-text { background: var(--pd-flame-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Outline display type — subway poster / graffiti fill ---- */
.pd-outline { color: transparent; -webkit-text-stroke: var(--pd-stroke-2) currentColor; }
.pd-outline-light { color: transparent; -webkit-text-stroke: var(--pd-stroke-1) currentColor; }

/* ---- Halftone screen overlay ---- */
.pd-halftone { background-image: var(--pd-halftone); background-size: var(--pd-halftone-size); }

/* ---- Marquee / ticker ---- */
@keyframes pd-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.pd-marquee { overflow: hidden; white-space: nowrap; }
.pd-marquee > .pd-marquee-run { display: inline-flex; gap: var(--pd-ticker-gap); padding-right: var(--pd-ticker-gap); animation: pd-marquee var(--pd-ticker-dur) linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pd-marquee > .pd-marquee-run { animation: none; } }

/* ---- Neon flicker for OPEN signage. Used once per screen, max. ---- */
@keyframes pd-neon { 0%,100% { opacity: 1 } 92% { opacity: 1 } 94% { opacity: .55 } 96% { opacity: 1 } 97% { opacity: .7 } 98% { opacity: 1 } }
.pd-neon { animation: pd-neon 6s steps(1,end) infinite; }
@media (prefers-reduced-motion: reduce) { .pd-neon { animation: none; } }

a { color: var(--pd-flame-red); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: var(--pd-flame-deep); }