/* XMetric effects — shadows, gradients, animations, focus.
   Gradients are RESTRICTED: primary button, logo, active menu item, highlight icons.
   Never a page background. */
:root {
  /* Shadows */
  --shadow-card: 0 1px 2px rgba(24, 22, 18, .04);
  --shadow-pop: 0 8px 24px rgba(24, 22, 18, .10);
  --shadow-modal: 0 30px 70px rgba(0, 0, 0, .42);
  --shadow-accent: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #a855f7, #3b82f6); /* @kind color */
  --grad-brand-diagonal: linear-gradient(140deg, #7c4dff, #2563eb); /* @kind color */
  --grad-vivid: linear-gradient(120deg, #c084fc, #7c4dff, #3b82f6); /* @kind color */
  --grad-sidebar: linear-gradient(140deg, #2a2740, #0d0f14); /* @kind color */
  --grad-chart-fill: linear-gradient(180deg, rgba(124, 77, 255, .28), rgba(59, 130, 246, 0)); /* @kind color */
  --grad-shimmer: linear-gradient(90deg, var(--tile2) 25%, var(--border) 42%, var(--tile2) 60%); /* @kind color */

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --dur-fast: .15s; /* @kind other */
  --dur-base: .3s; /* @kind other */

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

@keyframes xm-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xm-pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes xm-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes xm-growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes xm-growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes xm-spin { to { transform: rotate(360deg); } }