/* ─────────────────────────────────────────────────────────────
   PYKE. — Design tokens
   Single source of truth. Do not duplicate values elsewhere.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Colors */
  --cream:  #f4eed8;
  --ink:    #1a1410;
  --red:    #ff2600;
  --cyan:   #00cfff;
  --teal:   #1f8f7a;   /* product stripe colour — lid + side gussets */
  --yellow: #e8d47a;
  --seam:   #b6afa0;
  --error:  #ff2600;
  --ink-soft: rgba(26, 20, 16, 0.65);
  --ink-faint: rgba(26, 20, 16, 0.4);
  --cream-soft: rgba(244, 238, 216, 0.65);

  /* Type families */
  --display: 'Bebas Neue', sans-serif;
  --body:    'Space Grotesk', sans-serif;
  --mono:    'Space Mono', monospace;

  /* Borders */
  --border: 3px solid var(--ink);
  --border-thin: 1.5px solid var(--ink);
  --border-hair: 1px solid var(--ink);

  /* Shadows — hard, no blur */
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --shadow-xl: 8px 8px 0 var(--ink);
  --shadow-red: 4px 4px 0 var(--red);

  /* Spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 40px;
  --s-7: 56px;
  --s-8: 64px;
  --s-9: 96px;

  /* Z-index */
  --z-nav: 60;
  --z-drawer: 90;
  --z-modal: 95;
  --z-toast: 100;

  /* Page geometry */
  --max-content: 1280px;
  --gutter: 32px;
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
}