/* ============================================================
   YUV.AI — EFFECTS: shadows, glow, glass, motion
   Apple's soft elevation + YUV.AI neon glow + liquid-glass.
   Liquid-glass params mirror the iOS 27 kit:
   frost 6→16, depth 30, opacity 25, saturate boost.
   ============================================================ */

:root {
  /* ---- Elevation (soft, neutral) ---- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:  0 18px 48px rgba(0,0,0,0.14);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.20);

  /* ---- Neon glow (brand) ---- */
  --glow-sm:      0 0 0 1px rgba(var(--glow-magenta),0.30), 0 6px 20px rgba(var(--glow-magenta),0.28);
  --glow-md:      0 8px 30px rgba(var(--glow-magenta),0.40), 0 2px 8px rgba(var(--glow-magenta),0.30);
  --glow-cyan-md: 0 8px 30px rgba(var(--glow-cyan),0.38), 0 2px 8px rgba(var(--glow-cyan),0.28);
  --glow-text:    0 0 24px rgba(var(--glow-magenta),0.55);

  /* ---- Liquid glass ---- */
  --glass-backdrop: blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* @kind other */
  /* inner specular highlight + outer lift, the "liquid glass" read */
  --glass-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.5),
    inset 0 -1px 1px 0 rgba(255,255,255,0.12),
    0 8px 32px rgba(0,0,0,0.18);
  --glass-shadow-dark:
    inset 0 1px 0 0 rgba(255,255,255,0.16),
    inset 0 -1px 1px 0 rgba(0,0,0,0.30),
    0 12px 40px rgba(0,0,0,0.45);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(var(--glow-magenta),0.45);

  /* ---- Motion (Apple-style spring-ish easing) ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-normal: 240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

:root[data-theme="dark"] .glass,
.dark .glass { box-shadow: var(--glass-shadow-dark); }
