/* ==========================================================================
   HASHTAG SMOKE SHOP — DESIGN TOKENS
   "Neon Counter" — the feeling of a lit glass case at midnight.
   Edit colors here and the whole site follows.
   ========================================================================== */

:root {
  /* ---- Ground ---------------------------------------------------------- */
  --ink:        #0A0A0B;   /* page ground */
  --ink-deep:   #060607;   /* deepest wells, footer */
  --panel:      #121214;   /* cards, sections */
  --panel-2:    #18181C;   /* raised surfaces, hover */
  --panel-3:    #1F1F25;   /* pressed, inputs */
  --line:       #26262C;   /* hairlines, borders */
  --line-soft:  #1C1C21;   /* quieter dividers */

  /* ---- Text ------------------------------------------------------------ */
  /* Contrast on --ink: text 18.6:1, muted 7.6:1, faint 5.2:1.
     All three clear WCAG AA (4.5:1) for normal-size body text. */
  --text:       #F5F5F6;
  --muted:      #A0A0AA;
  --faint:      #82828C;

  /* ---- Accent: reserved for ACTIONS and STATUS only -------------------- */
  --acid:       #D4FF3F;
  --acid-dim:   #A9CC2F;
  --acid-deep:  #7E991F;
  /* Focus rings and selection only. Never a zero-offset halo behind an
     element: a colored glow with no offset is decoration, not depth. */
  --acid-ring:  rgba(212, 255, 63, .30);
  --acid-haze:  rgba(212, 255, 63, .05);

  /* ---- Category hues: decorative variety, never on buttons -------------
     The saturated values are for glows, glyphs and borders only. The -text
     variants are lighter tints that clear WCAG AA on dark panels, and are
     the only ones allowed to carry words. */
  --violet:      #8B5CF6;
  --ember:       #FF6B2C;
  --rose:        #FF3F7F;
  --cyan:        #22D3EE;

  --violet-text: #A78BFA;
  --ember-text:  #FFA173;
  --rose-text:   #FF8FB5;
  --cyan-text:   #7DE8F7;

  /* ---- Status ---------------------------------------------------------- */
  --ok:         #4ADE80;
  --ok-glow:    rgba(74, 222, 128, .35);
  --closed:     #F87171;

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(.8125rem, .79rem + .11vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + .28vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.26rem + .55vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
  --step-5:  clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
  --step-6:  clamp(3.25rem, 1.9rem + 6.4vw, 7.5rem);

  /* ---- Space ----------------------------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 40px;  --s8: 56px;
  --s9: 72px;  --s10: 96px; --s11: 128px; --s12: 160px;

  /* ---- Shell ----------------------------------------------------------- */
  --wrap:       1200px;
  --wrap-wide:  1440px;
  --gutter:     clamp(20px, 4vw, 40px);
  --radius:     16px;
  --radius-sm:  10px;
  --radius-pill: 999px;
  --header-h:   68px;
  --bar-h:      68px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .45s;

  /* ---- Elevation --------------------------------------------------------
     Every shadow carries a vertical offset and a soft blur. Neutral, never
     tinted: light falls from above, it is not emitted by the element. */
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 6px 16px -6px rgba(0,0,0,.65);
  --shadow-3: 0 18px 36px -16px rgba(0,0,0,.8);
}