/* ============================================================
   HYGIENE STOCKLOTS — Design Tokens
   Premium European wholesaler · Bloomberg-terminal density
   ============================================================ */

:root {
  /* ---------- Color: deep ink + paper, terminal greens ------ */
  --ink-0: #0b0d10;       /* near-black background */
  --ink-1: #14171c;       /* card surface dark */
  --ink-2: #1c2026;       /* elevated dark surface */
  --ink-3: #2a2f38;       /* dark border */
  --ink-4: #3a414c;       /* muted dark text */

  --paper-0: #f6f4ee;     /* warm paper */
  --paper-1: #ffffff;     /* clean white */
  --paper-2: #ecebe4;     /* paper accent */
  --paper-3: #d8d6cc;     /* hairline */
  --paper-4: #6f6e66;     /* muted ink */

  --navy: #1a1a2e;        /* brand primary */
  --navy-2: #232342;
  --green: #2e7d32;       /* stock / live / CTA */
  --green-2: #1b5e20;
  --green-soft: #e8f5e9;

  --amber: #c77d00;       /* limited / urgency */
  --amber-soft: #fff4e0;
  --red:   #b8412c;       /* sold out */

  --whatsapp: #25d366;
  --whatsapp-2: #128c7e;

  /* ---------- Type ---------------------------------------- */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-9:  0.6875rem;   /* 11 */
  --fs-8:  0.75rem;     /* 12 */
  --fs-7:  0.8125rem;   /* 13 */
  --fs-6:  0.9375rem;   /* 15 */
  --fs-5:  1.0625rem;   /* 17 */
  --fs-4:  1.25rem;     /* 20 */
  --fs-3:  1.625rem;    /* 26 */
  --fs-2:  2.25rem;     /* 36 */
  --fs-1:  3.25rem;     /* 52 */
  --fs-0:  clamp(2.75rem, 6vw, 5.25rem); /* hero */

  /* ---------- Space --------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 14px;

  --maxw: 1320px;
}

/* ---------- Reset ---------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  line-height: 1.55;
  color: var(--ink-0);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Utility --------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-4);
}
.eyebrow.on-dark { color: rgba(255,255,255,0.55); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.live { background: var(--green); box-shadow: 0 0 0 0 rgba(46,125,50,.6); animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,125,50,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(46,125,50,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
}
.hide-mobile { display: initial; }
@media (max-width: 768px) { .hide-mobile { display: none !important; } }