/* ==========================================================================
   Design Tokens: Shadows & Elevation
   Layered shadow system for depth hierarchy
   ========================================================================== */

:root {
  --shadow-xs: 0 1px 2px rgba(9, 30, 66, 0.06);
  --shadow-sm: 0 1px 3px rgba(9, 30, 66, 0.08), 0 1px 2px rgba(9, 30, 66, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(9, 30, 66, 0.08), 0 2px 4px -2px rgba(9, 30, 66, 0.06);
  --shadow-lg: 0 12px 24px -4px rgba(9, 30, 66, 0.12), 0 4px 8px -2px rgba(9, 30, 66, 0.06);
  --shadow-xl: 0 20px 40px -8px rgba(9, 30, 66, 0.16), 0 8px 16px -4px rgba(9, 30, 66, 0.08);
  --shadow-2xl: 0 32px 64px -12px rgba(9, 30, 66, 0.2);

  /* Card specific */
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-lg);

  /* Overlay / modal */
  --shadow-overlay: 0 0 0 1px rgba(9, 30, 66, 0.08), var(--shadow-xl);

  /* Focus ring */
  --shadow-focus: 0 0 0 2px var(--color-surface-primary), 0 0 0 4px var(--color-border-focus);

  /* Sticky header */
  --shadow-sticky: 0 2px 8px rgba(9, 30, 66, 0.08);
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.7);
  --shadow-sticky: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 2px var(--color-surface-primary), 0 0 0 4px var(--color-border-focus);
}