/* Visual treatment is orthogonal to primary/secondary/outline roles.
   Inherited style variables allow independently rendered comparison specimens. */
[data-button-style="clean"]{
  --ds-btn-gradient:none;
  --ds-btn-border:color-mix(in srgb,var(--ds-color-primary) 85%,var(--ds-color-text));
  --ds-btn-shadow:none;
  --ds-btn-hover-shadow:none;
  --ds-btn-active-shadow:inset 0 1px 2px rgba(0,0,0,.12);
  --ds-btn-radius:var(--ds-radius-md);
  --ds-btn-hover-transform:none;
  --ds-btn-active-transform:scale(.985);
  --ds-btn-secondary-gradient:none;
  --ds-btn-secondary-shadow:none;
  --ds-btn-secondary-hover-shadow:none;
}
[data-button-style="soft"]{
  --ds-btn-gradient:none;
  --ds-btn-border:color-mix(in srgb,var(--ds-color-primary) 87%,var(--ds-color-text));
  --ds-btn-shadow:0 2px 8px color-mix(in srgb,var(--ds-color-primary) 15%,transparent);
  --ds-btn-hover-shadow:0 4px 12px color-mix(in srgb,var(--ds-color-primary) 22%,transparent);
  --ds-btn-active-shadow:0 1px 3px color-mix(in srgb,var(--ds-color-primary) 17%,transparent);
  --ds-btn-radius:calc(var(--ds-radius-md) + 1px);
  --ds-btn-hover-transform:translateY(-1px);
  --ds-btn-active-transform:scale(.985);
  --ds-btn-secondary-gradient:none;
  --ds-btn-secondary-shadow:0 1px 5px rgba(12,18,36,.06);
  --ds-btn-secondary-hover-shadow:0 3px 9px rgba(12,18,36,.09);
}
[data-button-style="expressive"]{
  --ds-btn-gradient:none;
  --ds-btn-border:color-mix(in srgb,var(--ds-color-primary) 88%,var(--ds-color-text));
  --ds-btn-shadow:0 4px 0 color-mix(in srgb,var(--ds-color-primary) 55%,#000000),
    0 8px 18px color-mix(in srgb,var(--ds-color-primary) 18%,transparent);
  --ds-btn-hover-shadow:0 5px 0 color-mix(in srgb,var(--ds-color-primary) 55%,#000000),
    0 10px 22px color-mix(in srgb,var(--ds-color-primary) 22%,transparent);
  --ds-btn-active-shadow:0 1px 0 color-mix(in srgb,var(--ds-color-primary) 50%,#000000);
  --ds-btn-radius:calc(var(--ds-radius-md) + 4px);
  --ds-btn-hover-transform:translateY(-2px) scale(1.02);
  --ds-btn-active-transform:translateY(2px) scale(.985);
  --ds-btn-secondary-gradient:none;
  --ds-btn-secondary-shadow:0 2px 0 rgba(10,20,30,.15);
  --ds-btn-secondary-hover-shadow:0 3px 0 rgba(10,20,30,.15);
}
:root[data-motion="expressive"]{--ds-motion-fast:220ms;--ds-motion-normal:320ms}
:root[data-motion="reduced"]{--ds-motion-fast:0ms;--ds-motion-normal:0ms}
:root[data-motion="reduced"] .ds-button,
:root[data-motion="reduced"] .ds-dialog,
:root[data-motion="reduced"] .ds-dialog::backdrop{animation:none!important;transition-duration:0ms!important}
:root[data-mode][data-contrast="high"]{--ds-color-border:var(--ds-color-text);--ds-color-border-strong:var(--ds-color-text)}
:root[data-contrast="high"] .ds-button:focus-visible,
:root[data-contrast="high"] .ds-input:focus-visible,
:root[data-contrast="high"] .ds-select:focus-visible{outline-width:4px}
@media (prefers-reduced-motion:reduce){
  .ds-button{transition:none!important;animation:none!important}
}

:root[data-motion="reduced"] .ds-button:hover,
:root[data-motion="reduced"] .ds-button:active{transform:none!important}
@media (prefers-reduced-motion:reduce){
  .ds-button:hover,.ds-button:active{transform:none!important}
}