/* ============================================================
   Kroma Living — Spacing, radii, shadows, motion
   Calm, generous spacing. Soft rounded forms echoing the isotipo.
   ============================================================ */

:root {
  /* ---- Spacing (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;

  /* ---- Radii (soft, generous — echoes the circular isotipo) ---- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-2xl: 44px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* ---- Shadows (low, warm, diffuse — never harsh) ---- */
  --shadow-xs: 0 1px 2px rgba(29, 28, 59, 0.05);
  --shadow-sm: 0 2px 8px rgba(29, 28, 59, 0.06);
  --shadow-md: 0 8px 24px rgba(29, 28, 59, 0.08);
  --shadow-lg: 0 18px 48px rgba(29, 28, 59, 0.10);
  --shadow-glow: 0 12px 40px rgba(232, 118, 75, 0.18); /* terracota lift */

  /* ---- Motion (gentle, no bounce — "intensity that produces calm") ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-6);
}