/* ==========================================================================
   Fashion Pedon — Shape: radius, border, elevation, motion

   Radius rule of thumb: the smaller the element, the tighter the corner.
   The mark's own corner (28% of its square) is the only truly round thing
   in the system, which is what keeps it reading as a logo and not a button.
   ========================================================================== */

:root {
  /* ---------- Radius ----------------------------------------------------- */
  --fp-radius-none: 0;
  --fp-radius-xs:  4px;   /* badges, swatch outlines, table cells           */
  --fp-radius-sm:  6px;   /* inputs, chips, size tabs                       */
  --fp-radius-md:  10px;  /* buttons, small cards                           */
  --fp-radius-lg:  14px;  /* product cards, panels                          */
  --fp-radius-xl:  20px;  /* modals, hero media                             */
  --fp-radius-2xl: 28px;  /* full-bleed feature blocks                      */
  --fp-radius-pill: 999px;/* status pills, filter chips, avatars            */
  --fp-radius-mark: 28%;  /* the logo container. Nothing else uses this.    */

  /* ---------- Borders ---------------------------------------------------- */
  --fp-border-w-hair: 1px;
  --fp-border-w-thick: 2px;
  --fp-border-hair: var(--fp-border-w-hair) solid var(--fp-border-default);
  --fp-border-subtle-line: var(--fp-border-w-hair) solid var(--fp-border-subtle);

  /* The seam. A dashed rule with garment-tag proportions — 6px stitch,
     5px gap. Used as the section divider throughout the system, and it is
     the one motif that makes a Fashion Pedon page identifiable at a glance. */
  --fp-seam-color: var(--fp-paper-300);
  --fp-seam-dash: 6px;
  --fp-seam-gap: 5px;
  --fp-seam: repeating-linear-gradient(
    to right,
    var(--fp-seam-color) 0,
    var(--fp-seam-color) var(--fp-seam-dash),
    transparent var(--fp-seam-dash),
    transparent calc(var(--fp-seam-dash) + var(--fp-seam-gap))
  );

  /* ---------- Elevation --------------------------------------------------
     Shadows are indigo-tinted, never neutral black. Four steps, and step 4
     is reserved for things that float over the page. */
  --fp-shadow-xs: 0 1px 2px rgba(16, 18, 43, 0.06);
  --fp-shadow-sm: 0 1px 3px rgba(16, 18, 43, 0.08), 0 1px 2px rgba(16, 18, 43, 0.04);
  --fp-shadow-md: 0 4px 12px rgba(16, 18, 43, 0.08), 0 2px 4px rgba(16, 18, 43, 0.04);
  --fp-shadow-lg: 0 12px 28px rgba(16, 18, 43, 0.12), 0 4px 8px rgba(16, 18, 43, 0.05);
  --fp-shadow-xl: 0 24px 56px rgba(16, 18, 43, 0.18);

  /* Card lift on hover — product cards only */
  --fp-shadow-lift: 0 10px 24px rgba(59, 76, 240, 0.14);

  /* Focus ring, as a shadow so it never shifts layout */
  --fp-ring: 0 0 0 3px var(--fp-focus-ring);
  --fp-ring-offset: 0 0 0 2px var(--fp-focus-ring-offset), 0 0 0 5px var(--fp-focus-ring);

  /* ---------- Motion ----------------------------------------------------- */
  --fp-duration-instant: 90ms;
  --fp-duration-fast:    160ms;
  --fp-duration-base:    240ms;
  --fp-duration-slow:    400ms;

  --fp-ease-standard: cubic-bezier(0.2, 0, 0.15, 1);
  --fp-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --fp-ease-in:       cubic-bezier(0.7, 0, 0.84, 0);

  --fp-transition-control: background-color var(--fp-duration-fast) var(--fp-ease-standard),
                           border-color var(--fp-duration-fast) var(--fp-ease-standard),
                           color var(--fp-duration-fast) var(--fp-ease-standard),
                           box-shadow var(--fp-duration-fast) var(--fp-ease-standard);

  /* ---------- Z-index ---------------------------------------------------- */
  --fp-z-base: 0;
  --fp-z-sticky: 100;
  --fp-z-header: 200;
  --fp-z-drawer: 300;
  --fp-z-overlay: 400;
  --fp-z-modal: 500;
  --fp-z-toast: 600;
}

/* Anyone who has asked their system to calm down gets a calm system. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fp-duration-instant: 1ms;
    --fp-duration-fast: 1ms;
    --fp-duration-base: 1ms;
    --fp-duration-slow: 1ms;
  }
}