/* ==========================================================================
   QPerfect theme for MkDocs Material.
   --------------------------------------------------------------------------
   Material only accepts preset palette names for primary/accent, so the brand
   palette is applied by overriding its CSS variables here. Wire up via
   mkdocs.yml (see mkdocs-snippet.yml):

       extra_css:
         - stylesheets/qperfect.css

   Covers the `default` (light) and `slate` (dark) colour schemes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ----- Light scheme ------------------------------------------------------ */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #157f8f;          /* teal header */
  --md-primary-fg-color--light: #1a9fb3;
  --md-primary-fg-color--dark: #0e5f6b;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #0e5f6b;
  --md-accent-fg-color--transparent: rgba(21, 127, 143, 0.1);

  --md-typeset-a-color: #157f8f;           /* links */

  --md-code-fg-color: #1a2e36;
  --md-code-bg-color: #f4f9fa;

  --md-footer-bg-color: #0a1419;
  --md-footer-bg-color--dark: #060d11;
}

/* ----- Dark scheme (slate) — teal header, lightened teal-tinted body ----- */
[data-md-color-scheme="slate"] {
  --md-hue: 200;

  --md-primary-fg-color: #0e5f6b;          /* brand teal header — visible in dark */
  --md-primary-fg-color--light: #157f8f;
  --md-primary-fg-color--dark: #0a3942;
  --md-primary-bg-color: #ffffff;

  --md-accent-fg-color: #36b6c8;
  --md-accent-fg-color--transparent: rgba(54, 182, 200, 0.1);

  --md-typeset-a-color: #36b6c8;           /* brighter teal links */

  --md-default-bg-color: #0b1c21;          /* content (portal body) */
  --md-default-fg-color: #dde9ec;
  --md-default-fg-color--light: #8fa5ae;
  --md-default-fg-color--lighter: rgba(143, 165, 174, 0.45);
  --md-default-fg-color--lightest: rgba(143, 165, 174, 0.18);

  --md-code-fg-color: #dde9ec;
  --md-code-bg-color: #0f1e24;

  --md-footer-bg-color: #0a1419;
  --md-footer-bg-color--dark: #060d11;
}

/* Cards / code / nav surfaces sit on the portal surface tone. */
[data-md-color-scheme="slate"] .md-typeset pre > code,
[data-md-color-scheme="slate"] .md-typeset .highlight { background-color: #0f1e24; }

/* Card-ish surfaces (sidebars/footer) a touch lighter than the page. */
[data-md-color-scheme="slate"] .md-sidebar,
[data-md-color-scheme="slate"] .md-nav--secondary {
  background-color: transparent;
}

/* ----- Typography -------------------------------------------------------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ----- Header — brand accent line ---------------------------------------- */
.md-header {
  box-shadow: 0 2px 0 0 #f5bd22;            /* amber underline keeps the pair */
}

/* ----- Active nav item — brand amber bar --------------------------------- */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  font-weight: 600;
}
.md-nav__link--active {
  box-shadow: inset 3px 0 0 0 #f5bd22;
  padding-left: 0.6rem;
}

/* ----- Buttons ----------------------------------------------------------- */
.md-typeset .md-button--primary {
  background-color: #157f8f;
  border-color: #157f8f;
  border-radius: 9999px;
  color: #ffffff;
}
.md-typeset .md-button--primary:hover {
  background-color: #0e5f6b;
  border-color: #0e5f6b;
}

/* ----- Admonitions — brand the note (teal) & warning (amber) ------------- */
.md-typeset .admonition, .md-typeset details {
  border-radius: 12px;
}
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #157f8f;
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(21, 127, 143, 0.12);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: #157f8f;
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #f5bd22;
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(245, 189, 34, 0.16);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: #d4a31d;
}

.md-typeset code { border-radius: 6px; }
.md-typeset pre > code { border-radius: 12px; }

::selection { background: rgba(245, 189, 34, 0.30); }