/* ============================================================
   xmesh DS · md3/_state.css — Material Design 3 state-layer tokens.

   MD3 state layers: a hover/focus/pressed/dragged overlay applied
   to a component using the appropriate `on-*` color at a specified
   opacity. Components compose these via `color-mix(in oklab, …)`
   over the resting background, e.g.:

     background-color: color-mix(
       in oklab,
       var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
       var(--md-sys-color-surface)
     );

   ============================================================ */

:root {
  --md-sys-state-hover-state-layer-opacity:    8%;
  --md-sys-state-focus-state-layer-opacity:    10%;
  --md-sys-state-pressed-state-layer-opacity:  10%;
  --md-sys-state-dragged-state-layer-opacity:  16%;
}