accessible-astro-components/src/styles/elevation.css

A comprehensive set of accessible, easy-to-use UI components for Astro websites, built with WCAG compliance and inclusive design principles.

/**
 * Elevation System
 *
 * This file defines the elevation system used across components,
 * providing consistent values for component styling and stacking order across the system.
 */

:root {
  --elevation-1: 0 1px 3px rgba(0 0 0 / 0.12);
  --elevation-2: 0 3px 6px rgba(0 0 0 / 0.15);
  --elevation-3: 0 10px 20px rgba(0 0 0 / 0.15);
  --elevation-4: 0 15px 25px rgba(0 0 0 / 0.15);
  --elevation-5: 0 20px 40px rgba(0 0 0 / 0.5);
}