/* Opt-in UX roles. Load after ../tokens.css. Values and mode rules come from Zine.
   Re-declare at mode boundaries so aliases follow nested theme/density/motion. */
:root,
[data-theme],
[data-density],
[data-motion],
[data-viewport],
.ux-scope {
  --ux-target-min: var(--density-control-height);
  --ux-target-touch-min: var(--size-control-lg);
  --ux-target-gap: var(--density-control-gap);
  --ux-gap-related: var(--space-8);
  --ux-gap-groups: var(--space-24);
  --ux-gap-sections: var(--space-32);
  --ux-group-inset: var(--density-inset);
  --ux-group-surface: var(--color-bg-surface);
  --ux-text-primary: var(--color-text-primary);
  --ux-text-secondary: var(--color-text-secondary);
  --ux-focus-color: var(--color-border-focus);
  --ux-focus-width: var(--border-width-focus);
  --ux-focus-offset: var(--focus-offset);
  --ux-action-primary-bg: var(--color-action-primary-default);
  --ux-action-primary-text: var(--color-action-primary-text);
  --ux-error-text: var(--color-status-danger-text);
  --ux-feedback-duration: var(--motion-duration-fast);
  --ux-transition-duration: var(--motion-duration-standard);
}