/* Blent Coffee — Spacing, radii, shadows, motion
   The brand is soft and rounded: pill buttons, generously rounded cards,
   light shadows. Patterns and ink do the heavy lifting, so elevation is gentle. */

: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 — rounded, capsule-friendly (echoes Grota's round terminals) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* borders */
  --border-hair: 1px solid var(--color-border);
  --border-ink: 1.5px solid var(--color-border-strong);

  /* shadows — soft, warm-tinted, low elevation */
  --shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.06);
  --shadow-md: 0 6px 18px rgba(32, 32, 32, 0.08);
  --shadow-lg: 0 18px 44px rgba(32, 32, 32, 0.12);
  --shadow-focus: 0 0 0 3px var(--blent-coral-tint);

  /* motion — quick, gentle, 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: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* layout */
  --container: 1200px;
  --container-narrow: 760px;
}