/* The Framework brand styling — colors taken from the logo gradient
   (#09638e deep blue → #2bdabe teal) and theframework.be (dark, teal accent). */

:root {
  --tf-deep-blue: #09638e;
  --tf-teal: #2bdabe;
}

/* Palette hooks (mkdocs.yml: primary/accent = custom) */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #0c0e11;        /* near-black header, like the website */
  --md-primary-fg-color--light: #1a1e24;
  --md-primary-fg-color--dark: #06080a;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--tf-teal);
  --md-accent-fg-color--transparent: rgba(43, 218, 190, 0.1);
  --md-accent-bg-color: #0c0e11;
  --md-accent-bg-color--light: rgba(12, 14, 17, 0.7);
}

/* Dark scheme (site default): darker canvas + teal links */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #111318;
  --md-typeset-a-color: var(--tf-teal);
}

/* Light scheme: deep blue links */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--tf-deep-blue);
}

/* Website background image (same as theframework.be), with an overlay
   per color scheme to keep the content readable. */
body[data-md-color-scheme="slate"] {
  background: linear-gradient(rgba(12, 14, 17, 0.72), rgba(12, 14, 17, 0.72)),
    url("../img/background.jpg") center / cover no-repeat fixed;
}

body[data-md-color-scheme="default"] {
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    url("../img/background.jpg") center / cover no-repeat fixed;
}

/* Header logos */
.md-header .md-logo img,
.md-header .md-logo svg {
  height: 1.4rem;
  width: auto;
}

.md-header__button.tf-home {
  margin-right: 0;
  padding-right: 0.2rem;
}

/* Teal underline on the active nav tab, echoing theframework.be */
.md-tabs__item--active .md-tabs__link {
  color: var(--tf-teal);
  border-bottom: 2px solid var(--tf-teal);
}