/* ─────────────────────────────────────────────────────────────
   HHEO / Jawaher — Spacing, Radius, Shadow, Motion
   Generous whitespace is a core brand trait. Base unit = 4px.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Spacing scale ──────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radius (moderate, per guideline ~8–12px) ───── */
  --radius-sm:   6px;
  --radius:      10px;   /* default — cards, fields, buttons */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;  /* filter chips, tabs, tags */
  --radius-circle: 50%;

  /* ── Shadows — soft, low, neutral (no colored glow) ─ */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.05);
  --shadow-sm: 0 1px 3px rgba(26,26,26,0.07), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md: 0 4px 14px rgba(26,26,26,0.08);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.10);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ── Layout ─────────────────────────────────────── */
  --container: 1200px;
  --gutter: var(--space-6);

  /* ── Motion — restrained, dignified. Ease, no bounce. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur:      220ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
}