/* ============================================================
   New Store — Design Tokens v0.1.0
   Name-agnostic design system: the store name (LootDrop /
   GrabStack / DealDash) is NOT decided yet, so nothing in this
   file or its consumers may reference a name. Tokens carry the
   impulse-buy energy; the logo arrives later.

   Single source of truth for colors, type, spacing, radii,
   shadows, breakpoints. The storefront links this file;
   components.css consumes these tokens and must NOT hard-code
   values that exist here.
   Brand rationale lives in design/DESIGN.md.

   HONESTY RULE (token-level): the CTA color is reserved
   EXCLUSIVELY for buy/order actions. There is intentionally NO
   token for fake scarcity — no discount-percentage color, no
   fake strikethrough color. Urgency comes only from real data
   (e.g. low stock), styled with --ns-alert on real counts.
   ============================================================ */

:root {
  /* ---------- Palette (why each exists: DESIGN.md §2) ---------- */
  --ns-paper: #faf6ee;          /* warm paper page background — shelf, not screen */
  --ns-ink: #211711;            /* dark ink — headlines, body text, dark bands */
  --ns-coal: #17100b;           /* deeper ink — footer, sticky quick-add bar */
  --ns-cta: #d6471f;            /* impulse-buy orange-red — BUY/ORDER CTAs ONLY */
  --ns-cta-deep: #a83412;       /* CTA press/hover; small white-on-CTA text */
  --ns-gold: #d9a441;           /* "deal" accent — deal-of-the-day banner, eyebrows */
  --ns-gold-deep: #8f6a1d;      /* gold variant safe for small text on paper */
  --ns-alert: #b3261e;          /* REAL low-stock counts only ("Only 1 left") */
  --ns-sand: #e9ddc7;           /* warm hairlines, borders, dividers */
  --ns-stone: #6e5f50;          /* muted warm grey-brown — secondary text */
  --ns-card: #ffffff;           /* product card surface — pops off paper */
  --ns-whatsapp: #25d366;       /* "Order on WhatsApp" button ONLY — green = this action */
  --ns-whatsapp-deep: #1da851;  /* WhatsApp button press/hover state */
  --ns-danger: #b3261e;         /* validation errors, destructive admin actions */

  /* ---------- Typography ----------
     Headings: punchy grotesque — Archivo when the CDN loads,
     tight Arial Narrow/system fallback when it doesn't (slow
     networks must never break the brand). Tight tracking keeps
     short deal headlines energetic. Body: plain system sans for
     max legibility of prices on cheap phones. */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale: grows with the viewport, no breakpoints needed */
  --font-size-display: clamp(2.5rem, 11vw, 4.5rem);
  --font-size-h1: clamp(1.625rem, 6vw, 2.375rem);
  --font-size-h2: clamp(1.25rem, 4.6vw, 1.625rem);
  --font-size-h3: clamp(1.0625rem, 3.8vw, 1.25rem);
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-eyebrow: 0.75rem;
  --font-size-price: 1.25rem;   /* prices read in one glance on a 360px phone */

  --font-weight-black: 800;     /* Archivo's heavy cut — the punch */
  --font-weight-bold: 700;
  --font-weight-medium: 600;
  --font-weight-regular: 400;

  --line-height-tight: 1.05;    /* heavy display needs tight leading to hit hard */
  --line-height-snug: 1.25;     /* headings, card names */
  --line-height-body: 1.55;     /* readable body copy */

  --letter-spacing-display: -0.01em; /* punchy grotesque sits tight */
  --letter-spacing-eyebrow: 0.16em;

  /* ---------- Spacing (4px base unit) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-12: 64px;

  /* ---------- Radii ----------
     Slightly squarer than Cynaza: deal energy is sharper than
     boutique energy. Pills stay full-round for badges. */
  --radius-sm: 6px;    /* inputs, small chips */
  --radius-md: 10px;   /* cards, buttons */
  --radius-lg: 18px;   /* hero / feature cards, banner */
  --radius-full: 999px;/* pills, badges */

  /* ---------- Shadows (warm-tinted, never blue-grey) ---------- */
  --shadow-sm: 0 2px 8px rgba(33, 23, 17, 0.08);
  --shadow-md: 0 8px 24px rgba(33, 23, 17, 0.14);
  --shadow-cta: 0 4px 14px rgba(214, 71, 31, 0.38);  /* CTA lift, buy buttons only */

  /* ---------- Layout ---------- */
  --container-max: 1200px;       /* deal grids run wider than a boutique */
  --container-pad-mobile: var(--space-4);
  --container-pad-desktop: var(--space-6);

  /* ---------- Breakpoints (for reference in media queries) ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* ---------- Motion (snappy — impulse buys feel fast) ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-medium: 240ms;
}