/* ============================================================
   L'origine du thé — Spacing, radii, shadows, layout
   A calm, generous rhythm. Soft warm shadows (lifted paper),
   modest radii (paper & porcelain, not rounded UI chrome).
   ============================================================ */

:root {
  /* ---------- Spacing (4px 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 */
  --space-11: 10rem;     /* 160 */

  /* ---------- Radii ---------- */
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     14px;
  --radius-xl:     22px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---------- Border widths ---------- */
  --border-hair: 1px;
  --border-thick: 1.5px;

  /* ---------- Shadows (warm, soft — lifted paper) ---------- */
  --shadow-xs: 0 1px 2px rgba(42, 39, 35, 0.06);
  --shadow-sm: 0 2px 8px rgba(42, 39, 35, 0.06);
  --shadow-md: 0 8px 24px rgba(42, 39, 35, 0.08);
  --shadow-lg: 0 18px 48px rgba(42, 39, 35, 0.12);
  --shadow-xl: 0 32px 80px rgba(42, 39, 35, 0.16);
  --shadow-inset-hair: inset 0 0 0 1px var(--border-soft);

  /* ---------- Layout ---------- */
  --container-sm:  640px;
  --container-md:  920px;
  --container-lg:  1180px;
  --container-xl:  1400px;
  --gutter:        clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --header-height: 76px;

  /* ---------- Motion (calm, no bounce) ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
  --dur-veil:   720ms; /* @kind other */  /* slow steam / fade-ins */
}
