/* Maps the user management pages onto the site's design tokens from variables.css */
:root {
  --um-font-family: var(--font-family-primary);
  --um-color-text: var(--color-text-primary);
  --um-color-text-muted: var(--color-text-secondary);
  --um-color-background: var(--color-bg-primary);
  --um-color-surface: var(--color-bg-secondary);
  --um-color-border: var(--color-border-primary);
  /* the violet of .btn-primary behind light text, which clears WCAG AA */
  --um-color-accent: var(--color-action-secondary);
  --um-color-accent-contrast: var(--color-text-primary);
  --um-color-danger: var(--color-accent-error);
  --um-color-success: var(--color-accent-success);
  --um-radius: var(--border-radius-sm);
}

/* Bulma colours strong text and table headers for a light page */
.um-section strong,
.um-admin-table th {
  color: inherit;
}

/* The starter sizes only the section's h2, so base.css would space and size its h3 above it on a phone */
.um-account-section h3 {
  margin: 0;
  font-size: var(--font-size-base);
}

/* The admin column is narrower than the starter's own page; values wrap so each row's controls stay in view */
.um-admin-table td {
  overflow-wrap: anywhere;
}

.um-admin-table td a,
.um-admin-table td button {
  overflow-wrap: normal;
}

/* The starter colours secondary buttons, footer links and legal links with the accent, under 4.5:1 on the dark surface */
.um-button-secondary,
.um-footer a,
.um-legal a,
[data-um-privacy-notice] a {
  color: var(--color-link-primary);
}

.um-button-secondary {
  border-color: var(--color-link-primary);
}

/* base.css takes every link's underline, and a link inside a sentence needs one to stand out by more than colour */
.um-hint a,
.um-footer a {
  text-decoration: underline;
}

/* waw's own column: Bulma's .columns pulls 12px outside the phone layout's gutter */
.account-column {
  max-width: var(--container-form);
  margin: 0 auto;
}

.account-column-wide {
  max-width: var(--container-form-wide);
}