:root {
  --brand-teal: #2e6f70;
  --brand-sage: #7ba897;
  --brand-mist: #f5f5f4;
  --brand-ink: #1a1a18;
  --brand-stone: #6b6b68;
  --brand-fog: #fdfdfd;

  --brand-background: #fdfdfd;
  --brand-surface: #ffffff;
  --brand-text: #1a1a18;
  --brand-text-muted: #6b6b68;
  --brand-primary: #2e6f70;
  --brand-primary-hover: #255b5c;
  --brand-on-primary: #ffffff;
  --brand-subtle: #f5f5f4;
  --brand-selection: #f5f5f4;
  --brand-line: #e2e2df;
  --brand-input: var(--brand-line);
  --brand-success: #5c7457;
  --brand-on-success: #ffffff;
  --brand-danger: #b53a2b;
}

:root.dark,
:root[data-palette="dark"] {
  --brand-background: #181a1c;
  --brand-surface: #212326;
  --brand-text: #e9e8e5;
  --brand-text-muted: #8f9397;
  --brand-primary: var(--brand-sage);
  --brand-primary-hover: #cfe2d6;
  --brand-on-primary: #181a1c;
  --brand-subtle: #111315;
  --brand-selection: #212326;
  --brand-line: #2b2e32;
  --brand-input: var(--brand-line);
  --brand-success: #9aba91;
  --brand-on-success: #181a1c;
  --brand-danger: #ef9b8e;
}

.brand-logo {
  display: block;
  flex-shrink: 0;
  width: 114px;
  height: 36px;
}

.brand-logo--symbol {
  box-sizing: border-box;
  width: 36px;
  padding: 4px;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-logo .brand-logo--dark {
  display: none;
}

.dark .brand-logo--light,
[data-palette="dark"] .brand-logo--light {
  display: none;
}

.dark .brand-logo--dark,
[data-palette="dark"] .brand-logo--dark {
  display: block;
}