/* ============================================================
   PIFF DISPENSARY — THE NEW YORK LAYER
   Piff is an East-Coast word: Harlem / Bronx, early-2000s Haze,
   Dipset. The dispensary wears that loudly where Piff Stixs
   packaging stays quiet. Everything here sits ON TOP of the
   Stixs foundation — it never replaces black, white or gold.
   Loud = the flavor spectrum at full strength + the badge flame.
   ============================================================ */

:root {
  /* ---- FLAME — sampled from the dispensary badge (the flame that dots the i in PiFF) ----
     This is the dispensary's own hot accent. Piff Stixs has gold; Piff Dispensary has flame. */
  --pd-flame-red: #ed1c24;
  --pd-flame-yellow: #ffe500;      /* same yellow the live in-store deal cards use */
  --pd-flame-deep: #b3111c;
  --pd-flame-grad: linear-gradient(180deg, #ffe500 0%, #ffb400 34%, #ed1c24 100%);   /* @kind color */
  --pd-flame-grad-h: linear-gradient(90deg, #ed1c24 0%, #ff6a00 50%, #ffe500 100%);  /* @kind color */

  /* ---- LOUD GROUNDS ----
     The only flavor tones cleared to run full-bleed behind type.
     Sky, tan-rose, sand and brown stay accent-only — they go muddy at scale. */
  --pd-loud-red: var(--ps-flavor-crimson);
  --pd-loud-orange: var(--ps-flavor-orange);
  --pd-loud-yellow: var(--ps-flavor-yellow);
  --pd-loud-lime: var(--ps-flavor-lime);
  --pd-loud-green: var(--ps-flavor-green);
  --pd-loud-turq: var(--ps-flavor-turq);
  --pd-loud-magenta: var(--ps-flavor-magenta);
  --pd-loud-purple: var(--ps-flavor-purple);

  /* ---- STREET SURFACES ---- */
  --pd-asphalt: #08080a;           /* same value as --pd-strip-bg; named for layout use */
  --pd-concrete: #17171b;          /* raised block on asphalt */
  --pd-glaze: #f4f2ec;             /* subway-tile white, warm */

  /* ---- PATTERNS ----
     CSS-only. All four are period-correct NY street furniture, not decoration. */
  --pd-awning: repeating-linear-gradient(115deg, var(--pd-flame-red) 0 34px, #fff 34px 68px);            /* @kind color */
  --pd-awning-black: repeating-linear-gradient(115deg, var(--ps-black) 0 26px, var(--pd-flame-yellow) 26px 52px); /* @kind color */
  --pd-hazard: repeating-linear-gradient(135deg, var(--ps-black) 0 12px, var(--pd-flame-yellow) 12px 24px);        /* @kind color */
  --pd-halftone: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);                          /* @kind color */
  --pd-halftone-size: 6px 6px;     /* @kind spacing */
  --pd-halftone-dark: radial-gradient(rgba(0,0,0,.14) 1px, transparent 1.4px);                           /* @kind color */

  /* ---- NEON — near-black surfaces ONLY. Never on paper. ---- */
  --glow-flame: 0 0 0 2px rgba(237,28,36,.35), 0 0 26px rgba(237,28,36,.55);   /* @kind shadow */
  --glow-yellow: 0 0 0 2px rgba(255,229,0,.30), 0 0 24px rgba(255,229,0,.45);  /* @kind shadow */
  --glow-text-flame: 0 0 12px rgba(237,28,36,.70), 0 0 34px rgba(237,28,36,.35);  /* @kind shadow */
  --glow-text-yellow: 0 0 10px rgba(255,229,0,.55), 0 0 30px rgba(255,229,0,.30); /* @kind shadow */

  /* ---- SCREENPRINT / STICKER OFFSETS (extends --sh-pop) ---- */
  --sh-pop-lg: 8px 8px 0 var(--ps-black);            /* @kind shadow */
  --sh-pop-red: 6px 6px 0 var(--pd-flame-red);       /* @kind shadow */
  --sh-pop-yellow: 6px 6px 0 var(--pd-flame-yellow); /* @kind shadow */
  --sh-pop-white: 6px 6px 0 var(--ps-white);         /* @kind shadow */

  /* ---- MARQUEE / TICKER — the site's scrolling strips ---- */
  --pd-ticker-h: 44px;      /* @kind spacing */
  --pd-ticker-h-lg: 64px;   /* @kind spacing */
  --pd-ticker-gap: 56px;    /* @kind spacing */
  --pd-ticker-dur: 22s;     /* @kind other */
  --pd-ticker-dur-fast: 13s;/* @kind other */

  /* ---- ROUNDEL — the badge circle promoted to a UI token ---- */
  --pd-roundel-sm: 44px;    /* @kind spacing */
  --pd-roundel-md: 72px;    /* @kind spacing */
  --pd-roundel-lg: 120px;   /* @kind spacing */
  --pd-roundel-ring: 4px;   /* @kind spacing */

  /* ---- OUTLINE DISPLAY TYPE (subway poster / graffiti fill) ---- */
  --pd-stroke-1: 1.5px;     /* @kind spacing */
  --pd-stroke-2: 3px;       /* @kind spacing */
  --pd-stroke-3: 5px;       /* @kind spacing */

  /* ---- SEMANTIC: dispensary retail ---- */
  --retail-hot: var(--pd-flame-red);
  --retail-price: var(--pd-flame-yellow);
  --retail-ground: var(--pd-asphalt);
  --retail-block: var(--pd-concrete);
}