/* Application aliases keep shared UI rules independent from Web Awesome internals. */
:root {
  --ui-content-max-width: 72rem;
  --ui-content-gutter: 1rem;

  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-7: 2rem;
  --ui-space-8: 3rem;

  --ui-readable-width: 65ch;
  --ui-form-width: 42rem;
  --ui-auth-width: 32rem;
  --ui-control-min-height: 2.75rem;
  --ui-touch-target: 2.75rem;

  --ui-page-background: var(--wa-color-surface-lowered, Canvas);
  --ui-surface-background: var(--wa-color-surface-default, Canvas);
  --ui-surface-raised: var(--wa-color-surface-raised, Canvas);
  --ui-surface-border: var(--wa-color-surface-border, GrayText);
  --ui-text: var(--wa-color-text-normal, CanvasText);
  --ui-text-muted: var(--wa-color-text-quiet, GrayText);
  --ui-link: var(--wa-color-text-link, LinkText);
  --ui-focus-ring: 3px solid var(--wa-color-focus, Highlight);
  --ui-shadow-surface: var(--wa-shadow-m, 0 0.15rem 0.5rem color-mix(in oklab, CanvasText 12%, transparent));

  --ui-info-background: var(--wa-color-brand-fill-quiet, Highlight);
  --ui-info-text: var(--wa-color-brand-on-quiet, CanvasText);
  --ui-success-background: var(--wa-color-success-fill-quiet, Highlight);
  --ui-success-text: var(--wa-color-success-on-quiet, CanvasText);
  --ui-warning-background: var(--wa-color-warning-fill-quiet, Highlight);
  --ui-warning-text: var(--wa-color-warning-on-quiet, CanvasText);
  --ui-danger-background: var(--wa-color-danger-fill-quiet, Highlight);
  --ui-danger-text: var(--wa-color-danger-on-quiet, CanvasText);
  --ui-neutral-background: var(--wa-color-fill-quiet, ButtonFace);
  --ui-neutral-text: var(--wa-color-on-quiet, ButtonText);
}