@layer utilities {
  .shadow-surface-sm {
    box-shadow: var(--elevation-small);
  }

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

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

  /* Alias — overlay/popovers share the floating elevation */
  .shadow-overlay {
    box-shadow: var(--elevation-floating);
  }

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