/* Shared with the main PHX Good product: forest, cream, gold and copper. */
:root {
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: Manrope, sans-serif;
  --green: #174737;
  --green-dark: #123c2e;
  --green-light: #e8eee7;
  --ink: #243e33;
  --muted: #637167;
  --paper: #f8f8f3;
  --white: #fff;
  --line: #dce1d8;
  --gold: #efd994;
  --copper: #965134;
  --surface: #fff;
  --surface-muted: #f1f3ec;
  --border-strong: #b9c6b9;
  --on-dark: #f8f8f3;
  --on-dark-muted: #cedbcf;
  --on-dark-line: #ffffff29;
  --accent: var(--green);
  --accent-soft: var(--green-light);
  --canvas: var(--paper);
  --sidebar: var(--green-dark);
  --focus: var(--copper);
  --mint: var(--green-light);
  --status-success: #206242;
  --status-success-soft: #e8f2e8;
  --status-warning: #81521f;
  --status-warning-soft: #fff4db;
  --status-warning-line: #e4d1a4;
  --status-danger: #a23c3c;
  --status-danger-soft: #fceceb;
  --status-danger-line: #e7bcb8;
  --status-neutral: #59675f;
  --chart-forest: var(--green);
  --chart-copper: var(--copper);
  --chart-moss: #65743b;
  --chart-gold: #a16b23;
  --chart-teal: #2f7467;
  --chart-brick: #a6443c;
  --copper-soft: #f6ebe4;
  --moss-soft: #eef1e3;
  --gold-soft: #fbf4df;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}
.brand .brand-sun {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--copper);
}
.brand .brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.brand .brand-wordmark {
  color: var(--green);
  font: 800 28px/1.05 var(--font-heading);
  letter-spacing: -0.065em;
  white-space: nowrap;
}
.brand .brand-light {
  font-weight: 500;
}
.brand .brand-dot {
  color: var(--copper);
}
.brand .brand-lockup small {
  font: 600 10px/1.3 var(--font-body);
  color: var(--muted);
  letter-spacing: 0.16em;
  margin-top: 5px;
}
@media (max-width: 700px) {
  .brand .brand-sun {
    width: 27px;
    height: 27px;
  }
  .brand .brand-wordmark {
    font-size: 24px;
  }
  .brand .brand-lockup small {
    font-size: 9px;
    margin-top: 3px;
  }
}