/* ============================================================
   ProzessPilot — Radii, borders, shadows, motion
   Clean, crisp, technical. Soft cool-tinted shadows, medium rounding.
   ============================================================ */
:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Border widths */
  --border-width:       1px;
  --border-width-thick: 2px;

  /* Shadows — cool blue-tinted, soft, layered */
  --shadow-xs:  0 1px 2px rgba(15, 67, 104, 0.06);
  --shadow-sm:  0 1px 2px rgba(15, 67, 104, 0.06), 0 2px 6px rgba(15, 67, 104, 0.06);
  --shadow-md:  0 2px 4px rgba(15, 67, 104, 0.06), 0 6px 16px rgba(15, 67, 104, 0.08);
  --shadow-lg:  0 8px 24px rgba(15, 67, 104, 0.10), 0 2px 6px rgba(15, 67, 104, 0.06);
  --shadow-xl:  0 16px 48px rgba(15, 67, 104, 0.14), 0 4px 12px rgba(15, 67, 104, 0.08);
  --shadow-brand: 0 10px 28px rgba(10, 149, 224, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Motion — quick, confident, 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 */
  --duration-fast:   120ms; /* @kind other */
  --duration-base:   200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
  --transition-base: all var(--duration-base) var(--ease-out);
}