/* Keryx brand palette — petrol-teal primary, amber accent.
   Overrides Material/zensical theme custom properties for both schemes. */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #14534F; /* petrol-teal */
  --md-primary-fg-color--light: #1d6b66;
  --md-primary-fg-color--dark:  #0f403c;
  --md-accent-fg-color:         #E8923B; /* warm amber */
  --md-accent-fg-color--transparent: #e8923b1a;
  --md-typeset-a-color:         #14534F;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #14534F;
  --md-primary-fg-color--light: #1d6b66;
  --md-primary-fg-color--dark:  #0f403c;
  --md-accent-fg-color:         #E8923B;
  --md-typeset-a-color:         #E8923B;
  --md-default-bg-color:        #1b1d1f;
}

/* Landing hero */
.keryx-hero {
  text-align: center;
  padding: 2.4rem 1rem 1.2rem;
}
.keryx-hero img { width: 96px; height: 96px; }
.keryx-hero h1 {
  font-weight: 800; letter-spacing: .01em; margin: .4rem 0 .2rem;
}
.keryx-hero .tagline {
  color: var(--md-default-fg-color--light); font-size: 1.05rem; max-width: 40rem;
  margin: 0 auto;
}
.keryx-hero .sub {
  color: var(--md-default-fg-color--light); font-size: .82rem; opacity: .8;
  margin-top: .5rem;
}

/* Accent the section "cards" grid on the landing page */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border-radius: 12px;
}