/* Cytario brand font — self-hosted Montserrat (variable weight) */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Montserrat[wght].woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Montserrat-Italic[wght].woff2") format("woff2");
}

:root {
  --md-text-font: "Montserrat", system-ui, sans-serif;
}

/* draw.io SVG diagrams — responsive sizing */
img[src$=".drawio.svg"] {
  max-width: 100%;
  height: auto;
}

/* --- Header wordmark -----------------------------------------------------
   The Cytario wordmark is wide, so constrain its height in the header and
   let the width follow the native aspect ratio. */
.md-header__button.md-logo {
  margin: 0;
  padding: 0.35rem 0.2rem;
}
.md-header__button.md-logo img {
  height: 1.6rem;
  width: auto;
  max-width: none;
  display: block;
}

/* --- Cytario brand colors — light scheme ---------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #5c2483; /* purple-700 — brand primary */
  --md-primary-fg-color--light: #9b4fcb; /* purple-400 */
  --md-primary-fg-color--dark: #4a1d6a; /* purple-800 */
  --md-accent-fg-color: #217d7e; /* teal-700 — AA on white */
  --md-accent-fg-color--transparent: rgba(53, 183, 184, 0.12);

  /* Design-system body text + brand links */
  --md-default-fg-color: rgb(55, 65, 81); /* slate — ds-color-text-body */
  --md-typeset-a-color: #217d7e; /* teal-700 */
  --md-typeset-a-color--hover: #1a6364; /* teal-800 */
}

/* --- Solid brand-purple header (light) -------------------------------------
   Material's light header is a translucent white "surface" bar, which makes the
   white wordmark illegible. Give it the brand purple background and white
   header icons so the white logo reads on both color schemes. */
[data-md-color-scheme="default"] .md-header {
  background-color: #5c2483; /* purple-700 */
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1);
  color: #ffffff;
}
[data-md-color-scheme="default"] .md-header__inner,
[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header__inner a,
[data-md-color-scheme="default"] .md-header .md-icon {
  color: #ffffff;
}

[data-md-color-scheme="default"] .md-header .md-search__button {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}
[data-md-color-scheme="default"] .md-header .md-search__button::before {
  background-color: #ffffff; /* magnifier icon */
}
[data-md-color-scheme="default"] .md-header .md-search__button::after {
  color: #475569; /* shortcut indicator (⌘K) */
}

/* --- Cytosc brand colors — dark scheme ------------------------------------------ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #4a1d6a; /* purple-800 */
  --md-primary-fg-color--light: #b87ddb; /* purple-300 */
  --md-primary-fg-color--dark: #5c2483; /* purple-700 */
  --md-accent-fg-color: #44c4c5; /* teal-400 */
  --md-accent-fg-color--transparent: rgba(68, 196, 197, 0.14);

  --md-typeset-a-color: #2a9b9c; /* teal-600 — AA on slate */
  --md-typeset-a-color--hover: #6dd0d1; /* teal-300 */
  --md-hue: 275;
}

/* --- Headings in brand purple ---------------------------------------------------- */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3 {
  color: #4a1d6a; /* purple-800 */
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #b87ddb; /* purple-300 */
}

/* --- Admonitions mapped to the design semantic palette ---------------------------- */
/* note = brand purple, info = blue, success = green, warning = amber, danger = rose. */
[data-md-color-scheme="default"] .md-typeset .admonition.note,
[data-md-color-scheme="default"] .md-typeset details.note {
  border-color: rgb(212, 180, 235); /* purple-200 */
}
[data-md-color-scheme="default"]
  .md-typeset
  .admonition.note
  > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.note > summary {
  background-color: rgb(245, 240, 250); /* purple-50 */
}

[data-md-color-scheme="default"] .md-typeset .admonition.info,
[data-md-color-scheme="default"] .md-typeset details.info {
  border-color: rgb(191, 219, 254); /* blue-200 */
}
[data-md-color-scheme="default"]
  .md-typeset
  .admonition.info
  > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.info > summary {
  background-color: rgb(239, 246, 255); /* blue-50 */
}

[data-md-color-scheme="default"] .md-typeset .admonition.success,
[data-md-color-scheme="default"] .md-typeset details.success {
  border-color: rgb(187, 247, 208); /* green-200 */
}
[data-md-color-scheme="default"]
  .md-typeset
  .admonition.success
  > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.success > summary {
  background-color: rgb(240, 253, 244); /* green-50 */
}

[data-md-color-scheme="default"] .md-typeset .admonition.warning,
[data-md-color-scheme="default"] .md-typeset details.warning {
  border-color: rgb(253, 230, 138); /* amber-200 */
}
[data-md-color-scheme="default"]
  .md-typeset
  .admonition.warning
  > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.warning > summary {
  background-color: rgb(255, 251, 235); /* amber-50 */
}

[data-md-color-scheme="default"] .md-typeset .admonition.danger,
[data-md-color-scheme="default"] .md-typeset details.danger {
  border-color: rgb(254, 205, 211); /* rose-200 */
}
[data-md-color-scheme="default"]
  .md-typeset
  .admonition.danger
  > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details.danger > summary {
  background-color: rgb(255, 241, 242); /* rose-50 */
}