// Shadow system - Subtle, layered shadows inspired by Shadcn
:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-none: 0 0 #0000;
  --shadow-soft: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-float: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-focus: 0 4px 20px rgba(0,0,0,0.18);
  --shadow-hero: 0 20px 60px rgba(0,0,0,0.15);
}

/**
 * @section Box Shadow
 */

/** @public No shadow */
.shadow-none { box-shadow: var(--shadow-none); }

/** @public Small shadow - subtle depth */
.shadow-sm { box-shadow: var(--shadow-sm); }

/** @public Medium shadow - moderate elevation */
.shadow-md { box-shadow: var(--shadow-md); }

/** @public Large shadow - strong elevation */
.shadow-lg { box-shadow: var(--shadow-lg); }

/** @public Extra large shadow - prominent elevation */
.shadow-xl { box-shadow: var(--shadow-xl); }

/** @public 2XL shadow - maximum elevation */
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/** @public Soft shadow - diffused */
.shadow-soft { box-shadow: var(--shadow-soft); }

/** @public Float shadow - floating effect */
.shadow-float { box-shadow: var(--shadow-float); }

/** @public Focus shadow - emphasis */
.shadow-focus { box-shadow: var(--shadow-focus); }

/** @public Hero shadow - dramatic marketing effect */
.shadow-hero { box-shadow: var(--shadow-hero); }