/* ============================================================
   Mo's Law Office — Spacing, Radii, Shadows, Layout, Motion
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Section rhythm */
  --section-y: clamp(64px, 9vw, 128px); /* @kind spacing */
  --container:  1200px; /* @kind spacing */
  --container-narrow: 760px; /* @kind spacing */
  --gutter: clamp(20px, 5vw, 64px); /* @kind spacing */

  /* Radii — restrained, professional (not pill-y) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Borders */
  --border-w: 1px; /* @kind spacing */
  --hairline-gold: 1px solid var(--border-gold); /* @kind other */

  /* Shadows — soft, warm-tinted, never harsh */
  --shadow-xs: 0 1px 2px rgba(20, 32, 46, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 32, 46, 0.07);
  --shadow-md: 0 10px 28px rgba(20, 32, 46, 0.10);
  --shadow-lg: 0 24px 56px rgba(20, 32, 46, 0.14);
  --shadow-gold: 0 10px 30px rgba(154, 111, 40, 0.22);

  /* Motion — calm, no bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}