/* ============================================================
   INWIN · EFFECTS — shadows, dot pattern, gradients, motion
   The brand uses soft floating white cards (line-icon chips),
   halftone dot textures, light-grey decorative blobs, and the
   multi-colour interwoven "rings" motif.
   ============================================================ */
:root {
  /* soft elevation — floating white chips/cards in the banners */
  --shadow-xs:  0 1px 2px rgba(31,33,34,0.06);
  --shadow-sm:  0 2px 8px rgba(31,33,34,0.08);
  --shadow-md:  0 8px 24px rgba(31,33,34,0.10);
  --shadow-lg:  0 16px 40px rgba(31,33,34,0.14);
  --shadow-chip: 0 6px 18px rgba(31,33,34,0.12);  /* icon chips */

  /* focus ring */
  --ring: 0 0 0 3px rgba(35,153,214,0.35);

  /* halftone dot texture (brand pattern) — use as background-image */
  --dot-color: var(--inwin-gris-200); /* @kind other */
  --dot-pattern: radial-gradient(var(--inwin-gris-200) 1.6px, transparent 1.7px); /* @kind other */
  --dot-size: 14px; /* @kind other */

  /* light decorative blob wash */
  --blob: var(--inwin-gris-100);

  /* motion — calm, professional; ease-out fades, no bounce */
  --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:  140ms; /* @kind other */
  --dur:       220ms; /* @kind other */
  --dur-slow:  420ms; /* @kind other */
}

/* utility: brand dot texture */
.inwin-dots {
  background-image: var(--dot-pattern);
  background-size: var(--dot-size) var(--dot-size);
}