/* SoftStack — Effects: the jelly/glossy dimensional system.
   This is the signature of the brand. Every interactive surface is a
   glossy 3D "jelly" — puffy, rounded, with a top gloss highlight, a soft
   inner rim light, and a colored drop shadow below. */
:root{
  /* ── Elevation / drop shadows (pink-tinted, never neutral grey) ── */
  --shadow-xs:0 1px 2px rgba(214,51,132,.10);
  --shadow-sm:0 3px 8px rgba(214,51,132,.12);
  --shadow-md:0 8px 20px rgba(214,51,132,.16);
  --shadow-lg:0 16px 36px rgba(214,51,132,.20);
  --shadow-xl:0 28px 60px rgba(214,51,132,.26);

  /* ── Jelly button: puffy dimensional stack ──
     outer colored drop + bottom inner core-shadow + top inner gloss highlight */
  --jelly-pink:
    0 6px 14px rgba(240,75,156,.35),
    0 2px 4px rgba(240,75,156,.25),
    inset 0 -6px 10px rgba(214,46,128,.35),
    inset 0 4px 8px rgba(255,255,255,.65);
  --jelly-pink-press:
    0 2px 6px rgba(240,75,156,.30),
    inset 0 -3px 6px rgba(214,46,128,.30),
    inset 0 3px 6px rgba(255,255,255,.55);
  /* soft/secondary jelly on light-pink fills */
  --jelly-soft:
    0 5px 12px rgba(214,51,132,.18),
    inset 0 -5px 9px rgba(214,46,128,.14),
    inset 0 4px 8px rgba(255,255,255,.80);
  --jelly-soft-press:
    0 2px 6px rgba(214,51,132,.16),
    inset 0 -2px 5px rgba(214,46,128,.12),
    inset 0 3px 6px rgba(255,255,255,.70);

  /* ── Inset "pressed well" — for input fields & table cells ── */
  --inset-well:
    inset 0 2px 4px rgba(214,46,128,.12),
    inset 0 -1px 0 rgba(255,255,255,.7);

  /* ── Card lift: gentle outer + faint top rim light ── */
  --card-lift:
    0 10px 24px rgba(214,51,132,.14),
    inset 0 1px 0 rgba(255,255,255,.9);

  /* ── Gloss overlays (apply as a background layer for the top-sheen) ── */
  --gloss-top:linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,0) 42%); /* @kind other */
  --gloss-diagonal:linear-gradient(135deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 38%); /* @kind other */

  /* ── Fills: jelly gradients (top-lit spheres) ── */
  --fill-pop:linear-gradient(180deg,#FF9BD0 0%,#FF6FB5 55%,#F04B9C 100%);
  --fill-pop-hover:linear-gradient(180deg,#FFA9D6 0%,#FF5AAA 55%,#E93E90 100%);
  --fill-soft:linear-gradient(180deg,#FFFFFF 0%,#FDE4F0 60%,#F9C4DE 100%);
  --fill-glass:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35));

  /* ── Motion — playful jelly springs ── */
  --ease-jelly:cubic-bezier(.34,1.56,.64,1); /* @kind other */ /* overshoot bounce */
  --ease-soft:cubic-bezier(.22,.61,.36,1);   /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-med:220ms;  /* @kind other */
  --dur-slow:360ms; /* @kind other */

  /* ── Glass blur ── */
  --blur-glass:blur(16px) saturate(1.3); /* @kind other */
}