/* Carbone 4 — Spacing, radii, shadows, motion
   ----------------------------------------------------------------
   The brand reads calm and orderly: soft-but-not-pill radii, light
   diffuse shadows (never heavy), and quiet, quick transitions. Cards
   on the site are bright white with a faint shadow and generous
   padding; deck panels are flat fills with square-ish corners. */
:root {
  /* Spacing scale (4px base) */
  --sp-1:  0.25rem;  /*  4 */
  --sp-2:  0.5rem;   /*  8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */

  /* Radii — soft, never fully pill except chips/avatars */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;  /* default card radius (matches site cards) */
  --r-lg:   20px;
  --r-xl:   28px;  /* hero image panels */
  --r-pill: 999px;

  /* Shadows — light, cool-tinted, diffuse */
  --shadow-xs: 0 1px 2px rgba(27, 36, 54, 0.05);
  --shadow-sm: 0 2px 8px rgba(27, 36, 54, 0.06);
  --shadow-md: 0 8px 24px rgba(27, 36, 54, 0.08);
  --shadow-lg: 0 18px 48px rgba(27, 36, 54, 0.10);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Borders */
  --bw: 1px;
  --bw-thick: 2px;

  /* Layout */
  --container:    1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */

  /* Motion — quiet and quick; fades + small slides, no bounce */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur:       200ms; /* @kind other */
  --dur-slow:  360ms; /* @kind other */
}