/* ==========================================================================
   ZZACORE — design tokens
   Palette sampled directly from the brand logo: #717E6A on #F6F1ED.
   Change a value here and it propagates through the whole storefront.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --zz-sage:       #717E6A;  /* logo green — primary brand colour */
  --zz-sage-deep:  #56624F;  /* buttons, hover, eyebrows */
  --zz-sage-pale:  #C9D2C1;  /* badges, accents on dark */
  --zz-sage-wash:  #E4E9DF;  /* image wells, soft fills */

  /* --- Ground ------------------------------------------------------------ */
  --zz-cream:      #F6F1ED;  /* logo background — page ground */
  --zz-bone:       #EDE6DF;  /* alternating sections */
  --zz-ink:        #1F241C;  /* text, footer, quick-add bar */
  --zz-muted:      #6B7268;  /* secondary text */
  --zz-line:       #DDD6CE;  /* hairlines */
  --zz-white:      #FFFFFF;

  /* --- Semantic ---------------------------------------------------------- */
  --zz-sale:       #B4453C;  /* sale price only — muted to sit beside sage */
  --zz-instock:    #4F7A52;
  --zz-oos:        #9A9189;

  /* --- Type -------------------------------------------------------------- */
  --zz-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --zz-font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --zz-track:       .14em;   /* the signature uppercase tracking */
  --zz-track-btn:   .11em;

  --zz-h1: clamp(38px, 5.2vw, 62px);
  --zz-h2: clamp(28px, 3.6vw, 44px);
  --zz-h3: clamp(19px, 1.6vw, 24px);
  --zz-body: 16px;
  --zz-small: 14px;
  --zz-label: 11px;

  /* --- Space & shape ----------------------------------------------------- */
  --zz-radius:    0;         /* square by design — do not round */
  --zz-pill:      999px;     /* only for count bubbles and swatches */
  --zz-container: 1320px;
  --zz-gutter:    clamp(18px, 4vw, 56px);
  --zz-section:   clamp(56px, 7vw, 104px);

  --zz-ease:   cubic-bezier(.22, 1, .36, 1);
  --zz-t-fast: 180ms var(--zz-ease);
  --zz-t:      300ms var(--zz-ease);
  --zz-t-slow: 700ms var(--zz-ease);

  --zz-shadow-sm: 0 1px 2px rgba(31, 36, 28, .06);
  --zz-shadow:    0 14px 34px -14px rgba(31, 36, 28, .20);
}