/* Mr. J's Barbershop — Shadows, motion & overlays.
   Buttons carry a soft drop; images use a bottom protection gradient for
   caption legibility. Motion is quiet — short fades, no bounce. */
:root {
  /* Shadows (exact from concept file) */
  --shadow-btn: 3px 3px 16px 0 rgba(0, 0, 0, 0.6);
  --shadow-card: 0 18px 48px -12px rgba(0, 0, 0, 0.55);
  --shadow-icon: 0 0 4.267px 0 rgba(0, 0, 0, 0.6);
  --ring-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --ring-outline: inset 0 0 0 2px var(--cream-050);

  /* Image protection gradient (bottom → up) */
  --scrim-bottom: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);  /* @kind other */
  --scrim-full: linear-gradient(180deg, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.65) 100%);  /* @kind other */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
}