:root {
  --brand-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
  --brand-font-display: "Arial Rounded MT Bold", "Avenir Next", Inter,
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--brand-font-sans);
}

.font-sans {
  font-family: var(--brand-font-sans) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.025em;
}

.brand-logo {
  display: inline-flex;
  align-items: baseline;
  color: #111827;
  font-family: var(--brand-font-display);
  font-size: 1.28rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.brand-logo__accent {
  color: #2563eb;
}

.brand-logo__suffix {
  letter-spacing: -0.075em;
}

.brand-logo--large {
  font-size: 1.65rem;
}

.brand-logo--admin {
  font-size: 1.12rem;
}

.dark .brand-logo,
[data-theme="dark"] .brand-logo,
.brand-logo--dark {
  color: #f8fafc;
}

.dark .brand-logo__accent,
[data-theme="dark"] .brand-logo__accent,
.brand-logo--dark .brand-logo__accent {
  color: #60a5fa;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-logo {
    transition: opacity 160ms ease;
  }

  a.brand-logo:hover {
    opacity: 0.82;
  }
}