/* ============================================================
   VETRO — EFFECTS: radii, shadows, motion, blur
   ============================================================ */
:root {
  /* ---- Corner radius ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;   /* default control radius */
  --radius-lg:  16px;   /* cards */
  --radius-xl:  24px;   /* large panels */
  --radius-pill:999px;
  --radius-full:50%;

  /* ---- Shadows: soft, diffuse, cool-tinted ---- */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.08), 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.08), 0 2px 4px rgba(11, 18, 32, 0.04);
  --shadow-lg: 0 12px 28px rgba(11, 18, 32, 0.10), 0 4px 8px rgba(11, 18, 32, 0.05);
  --shadow-xl: 0 24px 56px rgba(11, 18, 32, 0.14), 0 8px 16px rgba(11, 18, 32, 0.06);
  /* tinted glows for accent/brand emphasis */
  --shadow-brand: 0 8px 24px rgba(0, 187, 170, 0.28);
  --shadow-accent:0 8px 24px rgba(37, 99, 235, 0.28);
  --ring-focus:   0 0 0 3px rgba(37, 99, 235, 0.25);
  --ring-brand:   0 0 0 3px rgba(0, 187, 170, 0.22);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---- Blur (glass) ---- */
  --blur-sm: 8px; /* @kind other */
  --blur-md: 16px; /* @kind other */
}
