/* FLOS — Spacing, radius, shadow tokens
   Generous vertical rhythm; soft, low shadows; medium-round corners. */

: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: 80px;
  --space-10: 120px;

  --gap-card: var(--space-5);        /* 24px gap between cards */
  --section-pad-y: var(--space-10);  /* ~120px vertical section padding */
  --page-pad-x: var(--space-9);      /* 80px side padding (desktop) */
  --container-max: 1320px;

  /* ---- Radius ---- */
  --radius-sm: 6px;      /* buttons, inputs, tags */
  --radius-md: 8px;      /* feature cards */
  --radius-lg: 12px;     /* floating cards */
  --radius-xl: 20px;     /* large image panels */
  --radius-pill: 999px;
  --radius-circle: 50%;  /* portraits, avatars */

  /* ---- Shadows (soft, low, warm-neutral) ---- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-card: 0 4px 16px rgba(27,77,62,0.06);
  --shadow-float: 0 14px 40px rgba(27,77,62,0.14);
  --shadow-lift: 0 20px 56px rgba(27,77,62,0.18);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
}