/*
 * Smart Maintenance Task Manager handbook — colour overrides
 * Matches the palette of the marketing website at sm-tm.app.
 *
 * Applied via `palette.primary: custom` and `palette.accent: custom` in mkdocs.yml.
 */

:root {
  --smtm-primary:         #1e3a5f;   /* dark navy — header background, brand primary */
  --smtm-primary-light:   #2b4a75;   /* slightly lighter navy for hover / highlights */
  --smtm-dark:            #0f2236;   /* deepest navy — footer / dark sections */
  --smtm-accent:          #00b5d8;   /* cyan — links, interactive, focus */
  --smtm-accent-hover:    #009dc1;   /* cyan hover */
  --smtm-accent-light:    #e6f8fc;   /* very light cyan — backgrounds */
  --smtm-bg-light:        #f4f7f9;   /* near-white grey — neutral section backgrounds */
  --smtm-text:            #24313f;   /* body text */
  --smtm-text-muted:      #64748b;   /* muted secondary text */
  --smtm-border:          #d9e1e8;   /* neutral borders */
  --smtm-success:         #22c55e;   /* green — success admonitions */
  --smtm-warning:         #f59e0b;   /* amber — warning admonitions */
  --smtm-error:           #ef4444;   /* red — danger admonitions */
}

/* ------------------------------------------------------------------
 * Light theme (scheme=default)
 * ------------------------------------------------------------------ */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:         var(--smtm-primary);
  --md-primary-fg-color--light:  var(--smtm-primary-light);
  --md-primary-fg-color--dark:   var(--smtm-dark);
  --md-primary-bg-color:         #fff;
  --md-primary-bg-color--light:  rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:              var(--smtm-accent);
  --md-accent-fg-color--transparent: rgba(0, 181, 216, 0.1);
  --md-accent-bg-color:              #fff;
  --md-accent-bg-color--light:       rgba(255, 255, 255, 0.7);

  --md-default-fg-color:         var(--smtm-text);
  --md-default-fg-color--light:  var(--smtm-text-muted);
  --md-default-fg-color--lighter: rgba(36, 49, 63, 0.32);
  --md-default-fg-color--lightest: rgba(36, 49, 63, 0.07);
  --md-default-bg-color:         #fff;

  --md-typeset-a-color:          var(--smtm-accent);
  --md-code-bg-color:            var(--smtm-bg-light);
  --md-code-fg-color:            var(--smtm-text);

  --md-footer-bg-color:          var(--smtm-dark);
  --md-footer-bg-color--dark:    var(--smtm-dark);
  --md-footer-fg-color:          rgba(255, 255, 255, 0.85);
  --md-footer-fg-color--light:   rgba(255, 255, 255, 0.65);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------------------------
 * Dark theme (scheme=slate)
 * ------------------------------------------------------------------ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:         var(--smtm-dark);
  --md-primary-fg-color--light:  var(--smtm-primary);
  --md-primary-fg-color--dark:   #081521;
  --md-primary-bg-color:         #fff;
  --md-primary-bg-color--light:  rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:              var(--smtm-accent);
  --md-accent-fg-color--transparent: rgba(0, 181, 216, 0.18);
  --md-accent-bg-color:              #fff;
  --md-accent-bg-color--light:       rgba(255, 255, 255, 0.7);

  --md-typeset-a-color:          var(--smtm-accent);

  --md-footer-bg-color:          #081521;
  --md-footer-bg-color--dark:    #050e18;
}

/* ------------------------------------------------------------------
 * Link hover — darker cyan for affordance
 * ------------------------------------------------------------------ */
.md-typeset a:hover,
.md-typeset a:active {
  color: var(--smtm-accent-hover);
}

/* ------------------------------------------------------------------
 * Admonition colour alignment
 * Material's default admonition palette is fine, but tune the ones
 * we use most so they feel like the website.
 * ------------------------------------------------------------------ */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--smtm-accent);
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: var(--smtm-accent-light);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: var(--smtm-accent);
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--smtm-primary);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(30, 58, 95, 0.08);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--smtm-primary);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--smtm-warning);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--smtm-error);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--smtm-success);
}

/* "📸 Screenshot needed" admonitions use the `example` type. Tint them
   with the accent-light so they stand out as pending work. */
.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: var(--smtm-accent);
  background-color: var(--smtm-accent-light);
}

/* ------------------------------------------------------------------
 * Logo — give some breathing room
 * ------------------------------------------------------------------ */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}