/* fran-trak-support: Fran-Trak look for MkDocs Material.
   Follows the Fran-Trak Getting Started pages (epiphany onboarding/brand.inc): a dark brand bar
   (#1c1d26) with a Fortibus-yellow rule (#ffbb00), Poppins headings, Fortibus-blue links (#1b72de),
   yellow primary buttons with dark text. Dark mode borrows the register's "kitchen at night"
   charcoal and cream (fran-trak-pos src/theme.ts). The support mark uses the Fran-Trak receipt
   mark's colors: paprika #e8562a, cream #f5efe6, charcoal #1f1c23, ink #3f3d42. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

:root {
  --ft-dark: #1c1d26;
  --ft-yellow: #ffbb00;
  --ft-yellow-dark: #e6a800;
  --ft-blue: #1b72de;
  --ft-paprika: #e8562a;
  --ft-cream: #f5efe6;
  --ft-heading-font: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --md-text-font: "Helvetica Neue", Helvetica, Arial;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ft-dark);
  --md-primary-fg-color--light: #2a2b37;
  --md-primary-fg-color--dark: #121318;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: #1458b0;
  --md-accent-fg-color--transparent: rgba(27, 114, 222, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-typeset-a-color: var(--ft-blue);
}

[data-md-color-scheme="slate"] {
  --md-hue: 260;
  --md-default-bg-color: #17161b;
  --md-default-bg-color--light: rgba(23, 22, 27, 0.54);
  --md-default-fg-color: rgba(245, 239, 230, 0.87);
  --md-default-fg-color--light: rgba(245, 239, 230, 0.62);
  --md-default-fg-color--lighter: rgba(245, 239, 230, 0.32);
  --md-default-fg-color--lightest: rgba(245, 239, 230, 0.12);
  --md-typeset-color: rgba(245, 239, 230, 0.87);
  --md-code-bg-color: #1f1c23;
  --md-primary-fg-color: var(--ft-dark);
  --md-primary-fg-color--light: #2a2b37;
  --md-primary-fg-color--dark: #121318;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: var(--ft-yellow);
  --md-accent-fg-color--transparent: rgba(255, 187, 0, 0.1);
  --md-accent-bg-color: var(--ft-dark);
  --md-typeset-a-color: #5fa2f2;
  --md-footer-bg-color: #0f0e12;
  --md-footer-bg-color--dark: #0b0a0d;
}

/* The brand bar: dark with the yellow rule, as on the Getting Started pages. */
.md-header {
  border-bottom: 3px solid var(--ft-yellow);
}
.md-header__button.md-logo {
  padding: 0.2rem;
  margin-right: 0.2rem;
}
.md-header__button.md-logo img {
  height: 1.9rem;
}
.md-header__title {
  font-family: var(--ft-heading-font);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Headings in Poppins. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-nav__title,
.md-footer__title {
  font-family: var(--ft-heading-font);
}
.md-typeset h1 {
  font-weight: 600;
  color: var(--md-default-fg-color);
}
.md-typeset h2 {
  font-weight: 600;
}

/* Section labels in the left nav in the heading face. */
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
  font-family: var(--ft-heading-font);
  font-weight: 600;
}

/* Buttons: yellow primary with dark text, outlined secondary. */
.md-typeset .md-button {
  font-family: var(--ft-heading-font);
  font-weight: 600;
  border-radius: 4px;
  color: var(--md-typeset-a-color);
  border-color: currentColor;
}
.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus {
  background: var(--ft-yellow);
  border-color: var(--ft-yellow-dark);
  color: var(--ft-dark);
}
.md-typeset .md-button:hover,
.md-typeset .md-button--primary:hover {
  background: var(--ft-yellow-dark);
  border-color: var(--ft-yellow-dark);
  color: var(--ft-dark);
}

/* The "on this page" marker and search highlights in brand colors. */
.md-typeset mark,
.md-search-result mark {
  background-color: rgba(255, 187, 0, 0.3);
  color: inherit;
}
.md-search-result mark {
  background: none;
  color: var(--md-accent-fg-color);
}

/* Footer: same charcoal as the bar, yellow rule on top. */
.md-footer {
  border-top: 3px solid var(--ft-yellow);
}
.md-footer-meta {
  background-color: var(--md-primary-fg-color--dark);
}