/* ============================================================
   XYZ LABS — Effects: shadows, focus, blur, motion
   Shadows are deep, soft and tightly negative-spread — they
   read as a single grounded drop, never a fuzzy halo. Colored
   with the cool ink hue, never pure black.
   ============================================================ */

:root {
  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(11, 11, 15, 0.06);
  --shadow-sm: 0 1px 4px rgba(11, 11, 15, 0.08);
  --shadow-md: 0 8px 24px -12px rgba(11, 11, 15, 0.22);
  --shadow-lg: 0 24px 50px -28px rgba(11, 11, 15, 0.55);
  --shadow-xl: 0 24px 50px -32px rgba(11, 11, 15, 0.40);
  /* Lift on hover (paired with translateY(-3px)) */
  --shadow-lift: 0 20px 42px -22px rgba(11, 11, 15, 0.65);

  /* ---- Focus ring — accent, double-stroke on app bg ---- */
  --focus-ring: 0 0 0 3px var(--bg-app), 0 0 0 5px var(--accent);
  --focus-ring-soft: 0 0 0 3px var(--accent-soft);

  /* ---- Glass / blur (sticky nav, overlays) ---- */
  --blur-bar: blur(12px); /* @kind other */
  --scrim-light: rgba(250, 250, 251, 0.82);
  --scrim-dark:  rgba(11, 11, 15, 0.72);

  /* ---- Motion ---- */
  --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:   0.12s; /* @kind other */
  --dur:        0.16s; /* @kind other */
  --dur-slow:   0.28s; /* @kind other */
}