/* Box Shadows and Effects */

:root {
  /* Box Shadows */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Focus Shadows */
  --shadow-focus: 0 0 0 2px rgba(0, 102, 204, 0.1);
  --shadow-focus-blue: 0 0 0 3px rgba(66, 153, 225, 0.5);
  --shadow-focus-red: 0 0 0 3px rgba(229, 62, 62, 0.5);
  --shadow-focus-green: 0 0 0 3px rgba(72, 187, 120, 0.5);

  /* Transition Shadows */
  --transition-shadow: box-shadow 0.2s ease;
}

/* Shadow Utilities */
.shadow-none {
  box-shadow: var(--shadow-none);
}

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

.shadow-inner {
  box-shadow: var(--shadow-inner);
}

/* Hover Shadow Utilities */
.hover-shadow-sm:hover {
  box-shadow: var(--shadow-sm);
  transition: var(--transition-shadow);
}

.hover-shadow-md:hover {
  box-shadow: var(--shadow-md);
  transition: var(--transition-shadow);
}

.hover-shadow-lg:hover {
  box-shadow: var(--shadow-lg);
  transition: var(--transition-shadow);
}

.hover-shadow-xl:hover {
  box-shadow: var(--shadow-xl);
  transition: var(--transition-shadow);
}

/* Focus Shadow Utilities */
.focus-ring:focus {
  outline: none;
  box-shadow: var(--shadow-focus-blue);
}

.focus-ring-red:focus {
  outline: none;
  box-shadow: var(--shadow-focus-red);
}

.focus-ring-green:focus {
  outline: none;
  box-shadow: var(--shadow-focus-green);
}

/* Elevation Levels */
.elevation-1 {
  box-shadow: var(--shadow-sm);
}

.elevation-2 {
  box-shadow: var(--shadow-md);
}

.elevation-3 {
  box-shadow: var(--shadow-lg);
}

.elevation-4 {
  box-shadow: var(--shadow-xl);
}

.elevation-5 {
  box-shadow: var(--shadow-2xl);
}