/* AcquaBac — Radii, shadows, gradients, motion.
   The brand leans on soft molecule-round forms, generous radii, and airy
   diffuse shadows (clinical but soft). The signature gradient is the
   aqua→petrol of the logo mark. */
:root {
  /* radii — soft, rounded (echoes molecule bubbles) */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* shadows — soft, low-contrast, cool-tinted */
  --shadow-xs: 0 1px 2px rgba(12,108,132,0.06);
  --shadow-sm: 0 2px 8px rgba(12,108,132,0.08);
  --shadow-md: 0 8px 24px rgba(12,108,132,0.10);
  --shadow-lg: 0 18px 48px rgba(12,108,132,0.14);
  --shadow-brand: 0 12px 30px rgba(18,161,154,0.28);

  /* gradients */
  --gradient-brand: linear-gradient(135deg, #12a19a 0%, #0c6c84 100%);        /* @kind color */
  --gradient-brand-soft: linear-gradient(135deg, #3bb7b0 0%, #10809b 100%);   /* @kind color */
  --gradient-mist: linear-gradient(160deg, #eef6f9 0%, #cfe6ec 100%);         /* @kind color */
  --gradient-sphere: radial-gradient(circle at 35% 30%, #ffffff 0%, #cfe6ec 45%, #8ec6d4 100%); /* @kind color */

  /* motion */
  --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: 130ms;  /* @kind other */
  --dur: 220ms;       /* @kind other */
  --dur-slow: 420ms;  /* @kind other */
}