/* ============================================================
   Zakelijk Inleven — Effects: radius, borders, shadows, motion
   Warm, calm, grounded. Squared-but-soft. No glossy gradients.
   ============================================================ */

:root {
  /* Corner radius — modest. Brand uses near-square panels, softly rounded chips. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows — soft, warm, low. Cards lift gently, never float dramatically. */
  --shadow-xs: 0 1px 2px rgba(33, 53, 90, 0.06);
  --shadow-sm: 0 2px 8px rgba(33, 53, 90, 0.07);
  --shadow-md: 0 8px 24px rgba(33, 53, 90, 0.10);
  --shadow-lg: 0 18px 48px rgba(33, 53, 90, 0.14);
  /* Warm accent glow for primary CTAs on hover */
  --shadow-accent: 0 8px 22px rgba(255, 106, 0, 0.28);

  /* Motion — gentle, no bounce. Calm easing matching the brand's tone. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur: 220ms;       /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}