/* ============================================================
   EFFECTS — radii, shadows, glass surfaces
   The brand signature: generously rounded corners + frosted-glass
   panels with a soft, low, diffuse lake-blue shadow.
   ============================================================ */

:root {
  /* Corner radii — rounded & friendly (see brand reference) */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;   /* default control / small card */
  --radius-lg:   24px;   /* panels */
  --radius-xl:   32px;   /* hero cards, feature panels */
  --radius-2xl:  40px;
  --radius-pill: 999px;

  /* Shadows — tinted with brand navy, never neutral black.
     Soft, wide, low-opacity for the calm "spa" feel. */
  --shadow-xs:    0 1px 2px rgba(10, 46, 110, 0.06);
  --shadow-sm:    0 2px 6px rgba(10, 46, 110, 0.07), 0 1px 2px rgba(10, 46, 110, 0.06);
  --shadow-md:    0 6px 18px rgba(10, 46, 110, 0.08), 0 2px 6px rgba(10, 46, 110, 0.05);
  --shadow-lg:    0 16px 40px rgba(10, 46, 110, 0.12), 0 4px 12px rgba(10, 46, 110, 0.06);
  --shadow-xl:    0 28px 64px rgba(10, 46, 110, 0.16), 0 8px 20px rgba(10, 46, 110, 0.08);
  --shadow-glass: 0 8px 32px rgba(13, 49, 110, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* Glass / frosted panels */
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-tint:   rgba(217, 238, 248, 0.45); /* faint cyan frost */
  --glass-border:    rgba(255, 255, 255, 0.70);
  --glass-blur:      18px;
  --glass-blur-lg:   28px;

  /* Glass on dark surfaces */
  --glass-dark-bg:     rgba(255, 255, 255, 0.08);
  --glass-dark-border: rgba(255, 255, 255, 0.16);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}