@theme {
  --button-primary-background: var(--color-action);
  --button-primary-content: var(--color-on-action);
  --button-primary-hover: var(--color-action-hover);
  --field-border: var(--color-border-strong);
  --field-border-invalid: var(--color-danger);
  --dialog-elevation: var(--elevation-dialog);
  --navigation-active-background: color-mix(
    in oklch,
    var(--color-action) 14%,
    var(--color-panel)
  );
  --drawer-width: min(20rem, 88vw);
  --toast-width: min(24rem, calc(100vw - 2rem));
}

@media (forced-colors: active) {
  :root {
    --color-border: CanvasText;
    --color-border-strong: CanvasText;
    --color-focus: Highlight;
    --color-action: LinkText;
    --color-danger: MarkText;
    --color-danger-surface: Mark;
  }
}