/* ============================================================
   MagpieToolbox - Elevation + shadow tokens
   Shadows are tinted with INK (cool blue-gray rgb 16 24 38),
   never pure black, so elevation reads soft and refined.
   ============================================================ */

:root {
  --shadow-xs: 0 1px 2px rgba(16, 24, 38, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 24, 38, 0.06), 0 1px 2px rgba(16, 24, 38, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 24, 38, 0.08), 0 2px 6px rgba(16, 24, 38, 0.05);
  --shadow-lg: 0 14px 34px rgba(16, 24, 38, 0.10), 0 4px 10px rgba(16, 24, 38, 0.06);
  --shadow-xl: 0 28px 60px rgba(16, 24, 38, 0.14), 0 8px 18px rgba(16, 24, 38, 0.07);

  /* Colored elevation for primary surfaces (tracks the active accent) */
  --shadow-brand:    0 8px 22px color-mix(in srgb, var(--brand) 30%, transparent); /* @kind shadow */
  --shadow-brand-lg: 0 16px 38px color-mix(in srgb, var(--brand) 36%, transparent); /* @kind shadow */

  /* Hairline inner outline to crisp up white cards on white */
  --inner-line:      inset 0 0 0 1px rgba(16, 24, 38, 0.06); /* @kind shadow */

  /* Focus rings (keyboard a11y - WCAG AA visible focus; tracks accent) */
  --ring-focus:      0 0 0 3px color-mix(in srgb, var(--brand) 42%, transparent); /* @kind shadow */
  --ring-focus-blue: 0 0 0 3px rgba(46, 99, 232, 0.38); /* @kind shadow */
  --ring-danger:     0 0 0 3px rgba(219, 75, 90, 0.35); /* @kind shadow */
}