:root {
  --primary: var(--color-accent-strong);
  --secondary: var(--color-sidebar);
  --accent: var(--color-accent);
  --primary-fg: var(--color-text-on-accent);
  --body-fg: var(--color-text-primary);
  --body-bg: var(--color-page);
  --body-quiet-color: var(--color-text-secondary);
  --body-loud-color: var(--color-text-primary);
  --header-color: var(--color-sidebar-text);
  --header-branding-color: var(--color-sidebar-text);
  --header-bg: var(--color-sidebar);
  --header-link-color: var(--color-sidebar-text-muted);
  --breadcrumbs-fg: var(--color-text-on-accent);
  --breadcrumbs-link-fg: var(--color-text-on-accent);
  --breadcrumbs-bg: var(--color-accent-strong);
  --link-fg: var(--color-accent-strong);
  --link-hover-color: var(--color-accent-strong-hover);
  --link-selected-fg: var(--color-accent-strong-hover);
  --hairline-color: var(--color-border);
  --border-color: var(--color-border);
  --error-fg: var(--color-danger-fg);
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

input,
select,
textarea,
.vTextField {
  border-color: var(--input-border);
  border-radius: var(--radius-input);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input[type="submit"]:focus-visible {
  box-shadow: var(--focus-ring);
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input {
  border-radius: var(--radius-button);
  font-weight: var(--button-font-weight);
}

.button.default,
input[type="submit"].default,
.submit-row input.default {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
}

.button.default:hover,
input[type="submit"].default:hover,
.submit-row input.default:hover {
  background: var(--button-primary-bg-hover);
}
