/* Public UI V2 foundation: opt-in tokens and keyboard focus only. */
.public-ui-v2 {
  --public-v2-canvas: #FFFFFF;
  --public-v2-surface: #FFFFFF;
  --public-v2-surface-paper: #FAF9F6;
  --public-v2-surface-muted: #F3F2EF;
  --public-v2-footer-bg: #EEEEEC;
  --public-v2-text-primary: #202020;
  --public-v2-text-secondary: #5C5C5C;
  --public-v2-border: #D7D5D0;
  --public-v2-brand: #C51215;
  --public-v2-brand-hover: #9F0E11;
  --public-v2-focus-color: #8F131A;
}

body.theme-quoc-tang {
  --public-v2-focus-color: #111111;
}

html[data-mz-theme="dark"] body.theme-quoc-tang {
  --public-v2-focus-color: #F2F2F2;
}

.public-ui-v2 :where(
  a[href],
  button:not([disabled]),
  input:not([disabled]),
  select:not([disabled]),
  textarea:not([disabled]),
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [tabindex]:not([tabindex^="-"]):not([aria-disabled="true"])
):focus-visible {
  outline: 2px solid var(--public-v2-focus-color) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
  scroll-margin-block: 8px;
}