/* ==========================================================================
   Fashion Pedon — Spacing & layout tokens
   4px base unit. Every gap, pad, and margin in the system resolves to one of
   these. If a value isn't here, it doesn't get used.
   ========================================================================== */

:root {
  /* ---------- Scale ------------------------------------------------------ */
  --fp-space-0:  0;
  --fp-space-px: 1px;
  --fp-space-1:  0.25rem;  /*  4  icon-to-label, chip inner                 */
  --fp-space-2:  0.5rem;   /*  8  tight stacks, badge padding               */
  --fp-space-3:  0.75rem;  /* 12  form field inner, list row gap            */
  --fp-space-4:  1rem;     /* 16  default gap — the workhorse               */
  --fp-space-5:  1.25rem;  /* 20  card inner padding, mobile                */
  --fp-space-6:  1.5rem;   /* 24  card inner padding, desktop               */
  --fp-space-8:  2rem;     /* 32  between cards                             */
  --fp-space-10: 2.5rem;   /* 40  block separation                          */
  --fp-space-12: 3rem;     /* 48  section padding, mobile                   */
  --fp-space-16: 4rem;     /* 64  section padding, desktop                  */
  --fp-space-20: 5rem;     /* 80  major section break                       */
  --fp-space-24: 6rem;     /* 96  hero breathing room                       */

  /* ---------- Layout ----------------------------------------------------- */
  --fp-container-max: 1240px;   /* content ceiling                          */
  --fp-container-narrow: 760px; /* policy pages, single-column forms        */
  --fp-gutter: var(--fp-space-5);
  --fp-section-y: var(--fp-space-12);

  /* ---------- Grid ------------------------------------------------------- */
  --fp-grid-gap: var(--fp-space-5);
  --fp-grid-product-min: 200px; /* product card never narrower than this    */

  /* ---------- Component sizing ------------------------------------------ */
  --fp-control-h-sm: 2rem;    /* 32 — chips, table actions                  */
  --fp-control-h-md: 2.75rem; /* 44 — default. Also the mobile tap minimum. */
  --fp-control-h-lg: 3.25rem; /* 52 — Add to cart, Place order              */

  --fp-icon-sm: 16px;
  --fp-icon-md: 20px;
  --fp-icon-lg: 24px;
  --fp-icon-xl: 32px;

  --fp-header-h: 4rem;      /* row 1 only (logo/actions bar) */
  --fp-header-h-full: 8rem; /* row 1 + the always-open search row below it —
                                use this for anything that must clear the
                                WHOLE sticky header (sticky sidebars/buy-boxes) */
  --fp-tap-min: 44px; /* WCAG target size floor — never go under this */
}

@media (min-width: 900px) {
  :root {
    --fp-gutter: var(--fp-space-8);
    --fp-section-y: var(--fp-space-16);
    --fp-grid-gap: var(--fp-space-6);
    /* assets/css/storefront.css folds the search row into .fp-header__bar's
       own row at this same breakpoint, so the sticky header is really only
       --fp-header-h tall on desktop/laptop now, not the two stacked rows
       --fp-header-h-full assumed. Every sticky-offset consumer of
       --fp-header-h-full (.fp-split__aside, .rail-filters, .pdp__buy) reads
       this token, so redefining it here is the one place that needs to
       change for all three to clear the right height instead of leaving a
       leftover gap sized for a header row that no longer exists at desktop. */
    --fp-header-h-full: var(--fp-header-h);
  }
}