/* ============================================================
   EFFECTS — Michael Style
   Radii, shadows, blur. Soft-rounded capsules + cards, deep
   theatrical drop shadows (the studio is dark), glass blur on
   sticky chrome.
   ============================================================ */
:root {
  /* —— Corner radii —— */
  --radius-xs:    8px;    /* small swatch / chip inner */
  --radius-sm:    12px;   /* inputs, small cards */
  --radius-md:    16px;   /* cards, cells, tiles */
  --radius-lg:    20px;   /* large cards, browser frame */
  --radius-pill:  30px;   /* buttons, pills, capsules */
  --radius-round: 50%;    /* avatars, knobs, dots */
  --radius-phone: 46px;   /* device frame */
  --radius-screen:38px;   /* device screen */

  /* —— Shadows (theatrical, dark studio) —— */
  --shadow-card:  0 40px 100px -50px #000;         /* lifted card / browser */
  --shadow-phone: 0 40px 80px -44px #000;          /* floating device */
  --shadow-knob:  0 6px 20px rgba(0,0,0,.5);       /* accent knob */
  --shadow-pop:   0 18px 50px -20px rgba(0,0,0,.6);/* popover / dialog */

  /* —— Glass blur (sticky nav, tab bar, overlays) —— */
  --blur-chrome:  blur(14px); /* @kind other */
  --blur-glass:   blur(12px); /* @kind other */
  --scrim-dark:   rgba(10,10,11,.85);   /* nav / tabbar backdrop */
  --scrim-dark-2: rgba(10,10,11,.80);

  /* —— Focus —— */
  --focus-width:  3px;
  --focus-offset: 3px;

  /* —— Motion —— */
  --ease-out:     cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur-fast:     .18s; /* @kind other */
  --dur-med:      .28s; /* @kind other */
}