/* ============================================================
   Mereke — Spacing, radius, shadow, motion tokens
   4px base grid.
   ============================================================ */

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

  /* ---- Radius --------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;   /* chips, inputs            */
  --radius-md:   14px;   /* cards, buttons           */
  --radius-lg:   20px;   /* product tiles, panels    */
  --radius-xl:   28px;   /* large feature panels     */
  --radius-pill: 999px;  /* pills, round buttons     */

  /* ---- Shadows (warm, soft — never harsh) ----------------- */
  --shadow-xs:  0 1px 2px rgba(94, 20, 22, 0.06);
  --shadow-sm:  0 2px 8px rgba(94, 20, 22, 0.08);
  --shadow-md:  0 8px 24px rgba(94, 20, 22, 0.10);
  --shadow-lg:  0 18px 48px rgba(94, 20, 22, 0.14);
  --shadow-amber: 0 10px 30px rgba(226, 105, 59, 0.22);
  --shadow-inset-line: inset 0 0 0 1px var(--border-faint);

  /* ---- Borders -------------------------------------------- */
  --bw-hair: 1px;    /* @kind spacing */
  --bw-thin: 1.5px;  /* @kind spacing */
  --bw-med:  2px;    /* @kind spacing */

  /* ---- Motion --------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   240ms;  /* @kind other */
  --dur-slow:   480ms;  /* @kind other */

  /* ---- Layout -------------------------------------------- */
  --container:     1200px;  /* @kind spacing */
  --container-wide:1360px;  /* @kind spacing */
  --slide-w:       1280px;  /* @kind spacing */
  --slide-h:       720px;   /* @kind spacing */
}