/* ============================================================
   SHADOWS — Untitled UI elevation system.
   Soft, low-opacity gray (#101828) shadows. xs→3xl plus
   a brand focus ring and skeuomorphic inner-border helpers.
   ============================================================ */

:root {
  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.10), 0px 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);

  /* Focus rings */
  --focus-ring-brand: 0px 0px 0px 4px rgba(158, 119, 237, 0.24);
  --focus-ring-gray:  0px 0px 0px 4px rgba(152, 162, 179, 0.24);
  --focus-ring-error: 0px 0px 0px 4px rgba(240, 68, 56, 0.24);

  /* Skeuomorphic inner border (used on buttons for crisp edges) */
  --ring-inset: inset 0px -2px 0px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(16, 24, 40, 0.18);
}