/* ===========================================================================
   FEDUCCE — Spacing, radii, borders, shadow, layout, motion
   The system is architectural: an 8px base grid, hairline rules, and almost
   no rounding. Corners are sharp. Elevation is communicated by line and
   contrast, not by soft shadow.
   =========================================================================== */

:root {
  /* --- Spacing scale (8px base) ----------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 — section rhythm */

  /* --- Radii (sharp by default; jewelry is faceted, not rounded) -------- */
  --radius-none: 0;
  --radius-xs:   2px;   /* the most rounding we allow — inputs, chips */
  --radius-sm:   4px;
  --radius-pill: 999px; /* reserved: avatars, story rings, IG-style chips */

  /* --- Borders ---------------------------------------------------------- */
  --border-width:    1px;
  --border-width-2:  2px;   /* outlined buttons / framed posters */
  --frame-inset:     var(--space-5);  /* the page-frame label margin */

  /* --- Shadow (used rarely; product imagery carries the depth) ---------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(12, 12, 11, 0.06);
  --shadow-md:   0 8px 24px -12px rgba(12, 12, 11, 0.22);
  --shadow-lg:   0 24px 60px -24px rgba(12, 12, 11, 0.32);
  --shadow-emerald: 0 24px 60px -28px rgba(5, 38, 25, 0.55);

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1320px;
  --container-wide: 1600px;
  --gutter:        var(--space-5);
  --col-gap:       var(--space-5);

  /* --- Z-index ---------------------------------------------------------- */
  --z-base: 0;        /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-overlay: 800;   /* @kind other */
  --z-modal: 1000;    /* @kind other */
  --z-toast: 1200;    /* @kind other */

  /* --- Motion ----------------------------------------------------------- */
  /* Calm and editorial. Long, eased fades. No bounce. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
  --dur-slower: 680ms; /* @kind other */
}