/* ==========================================================================
   KLER — Effects: shadows, glass, blur, motion
   Soft, diffuse, purple-tinted shadows. Frosted "Soft Glass" surfaces.
   Gentle, friendly motion — ease-out, small bounce for affirmations.
   ========================================================================== */
:root {
  /* ---- Elevation (cool purple-tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(43, 40, 64, 0.06);
  --shadow-sm:  0 2px 8px rgba(43, 40, 64, 0.06);
  --shadow-md:  0 10px 24px rgba(123, 97, 255, 0.10);
  --shadow-lg:  0 18px 42px rgba(123, 97, 255, 0.14);
  --shadow-xl:  0 28px 64px rgba(74, 58, 158, 0.18);
  /* colored glow — CTAs, active FAB, orb */
  --shadow-brand: 0 12px 28px rgba(123, 97, 255, 0.38);
  --shadow-mint:  0 12px 28px rgba(63, 224, 216, 0.34);

  /* ---- Soft Glass ---- */
  --glass-bg:     rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur:   18px; /* @kind other */
  --glass-shadow: 0 8px 32px rgba(74, 58, 158, 0.14);

  /* ---- Rings / hairlines ---- */
  --ring-brand:  0 0 0 4px color-mix(in srgb, var(--purple-500) 22%, transparent);
  --hairline:    1px solid var(--neutral-200);

  /* ---- 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 */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}