/* ============================================================
   TOOSMART — EFFECTS: radius, shadow, blur, motion
   ============================================================ */

:root {
  /* --- Corner radii --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default control / card */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* --- Shadows (cool, low-spread — on light surfaces) --- */
  --shadow-xs:  0 1px 2px rgba(11, 11, 14, 0.06);
  --shadow-sm:  0 1px 3px rgba(11, 11, 14, 0.08), 0 1px 2px rgba(11, 11, 14, 0.04);
  --shadow-md:  0 6px 16px -4px rgba(11, 11, 14, 0.12), 0 2px 6px -2px rgba(11, 11, 14, 0.08);
  --shadow-lg:  0 18px 40px -12px rgba(11, 11, 14, 0.18), 0 4px 12px -4px rgba(11, 11, 14, 0.10);
  --shadow-xl:  0 32px 64px -16px rgba(11, 11, 14, 0.26);

  /* Brand glow — used on primary CTAs and active player chrome */
  --shadow-brand: 0 8px 24px -6px rgba(229, 30, 37, 0.45);
  --ring-brand:   0 0 0 3px var(--brand-ring);

  /* --- Blur (overlays, glass chrome on players) --- */
  --blur-sm: 8px; /* @kind other */
  --blur-md: 18px; /* @kind other */
  --blur-lg: 32px; /* @kind other */

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

/* Dark surfaces get deeper, tighter shadows */
[data-theme="dark"], .ts-dark {
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.55);
  --shadow-md:  0 8px 20px -6px rgba(0,0,0,0.6);
  --shadow-lg:  0 24px 48px -16px rgba(0,0,0,0.7);
  --shadow-xl:  0 40px 72px -20px rgba(0,0,0,0.8);
}