/* Merito palette: teal from the Merito wordmark, orange from the Phoenix
   gradient (packaging/branding/kit_render/banner_dark.html). */
:root {
  --md-primary-fg-color: #0d2028;
  --md-primary-fg-color--light: #1b3a45;
  --md-primary-fg-color--dark: #02191d;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #ef5325;
  --md-accent-fg-color--transparent: rgba(239, 83, 37, 0.1);
  --merito-teal: #2f8483;
  --merito-orange: #ef5325;
  --merito-amber: #f7931e;
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--merito-teal);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f1b20;
  --md-typeset-a-color: #5cc2c0;
}

/* Header and tabs share the dark hero gradient. */
.md-header,
.md-tabs {
  background: linear-gradient(140deg, #013535 0%, #02191d 58%, #041215 100%);
}

/* The hero artwork has a white ground; frame it as a card in dark mode. */
.md-typeset img[src$="hero.webp"] {
  border-radius: 16px;
}

[data-md-color-scheme="slate"] .md-typeset img[src$="hero.webp"] {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* The home page headline in the Phoenix gradient. */
.md-typeset h1.phoenix-headline {
  background: linear-gradient(90deg, var(--merito-amber), var(--merito-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.md-typeset .md-button {
  border-radius: 999px;
  margin: 0.25rem 0.5rem 0.25rem 0;
}

.md-typeset .md-button--primary {
  background: linear-gradient(90deg, var(--merito-amber), var(--merito-orange));
  border: none;
  color: #ffffff;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  filter: brightness(1.08);
  color: #ffffff;
}

/* The permalink would take the headline's gradient and show permanently. */
.md-typeset h1.phoenix-headline .headerlink {
  display: none;
}

/* Secondary buttons: outlined in the brand orange in both schemes. */
.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--merito-orange);
  color: var(--merito-orange);
}

.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus {
  background: var(--md-accent-fg-color--transparent);
  color: var(--merito-orange);
}