/* Site colours: neutral charcoal (dark) or white (light) with soft pastel accents, on top of Material.
   The dashboard (models.css) uses the --lt-* tokens defined here too. */

[data-md-color-scheme="default"] {
  --lt-bg: #ffffff;
  --lt-card: #f7f9fb;
  --lt-card-2: #eef2f6;
  --lt-hi-1: #e3f5ff;            /* highlighted cards */
  --lt-hi-2: #e5ecf6;
  --lt-hi-text: #1c1c1c;
  --lt-text: #1c1c1c;
  --lt-muted: rgba(28, 28, 28, 0.6);
  --lt-line: rgba(28, 28, 28, 0.08);
  --lt-accent: #4a6fa5;
  --lt-positive: #16a34a;
  --lt-warn: #d97706;
  --lt-tooltip: #1c1c1c;
  --lt-tooltip-text: #ffffff;
  --lt-nav-link: rgba(28, 28, 28, 0.78);
  --lt-nav-label: rgba(28, 28, 28, 0.45);

  --md-primary-fg-color: #1c1c1c;
  --md-primary-fg-color--light: #3a3a3a;
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #4a6fa5;
  --md-typeset-a-color: #3f64a0;
  --md-default-bg-color: var(--lt-bg);
}

[data-md-color-scheme="slate"] {
  --lt-bg: #111111;
  --lt-card: #1a1a1a;
  --lt-card-2: #242424;
  --lt-hi-1: #e3f5ff;
  --lt-hi-2: #e5ecf6;
  --lt-hi-text: #1c1c1c;
  --lt-text: #ffffff;
  --lt-muted: rgba(255, 255, 255, 0.72);
  --lt-line: rgba(255, 255, 255, 0.08);
  --lt-accent: #a8c5da;
  --lt-positive: #4ade80;
  --lt-warn: #fbbf24;
  --lt-tooltip: #050505;
  --lt-tooltip-text: #ffffff;
  --lt-nav-link: rgba(255, 255, 255, 0.8);
  --lt-nav-label: rgba(255, 255, 255, 0.42);

  --md-hue: 0;
  --md-primary-fg-color: #111111;
  --md-primary-fg-color--light: #1a1a1a;
  --md-primary-fg-color--dark: #0a0a0a;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #c6c7f8;
  --md-typeset-a-color: #a8c5da;
  --md-default-bg-color: var(--lt-bg);
  --md-default-fg-color: rgba(255, 255, 255, 0.94);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.72);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.4);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.08);
  --md-code-bg-color: #1a1a1a;
  --md-footer-bg-color: #0c0c0c;
  --md-footer-bg-color--dark: #080808;
}

/* Header and tabs blend into the page, separated by a hairline (as in the reference dashboards) */
.md-header {
  background-color: var(--lt-bg);
  color: var(--lt-text);
  box-shadow: 0 1px 0 var(--lt-line);
}
.md-header[data-md-state="shadow"], .md-header--shadow { box-shadow: 0 1px 0 var(--lt-line); }
.md-search__form { background-color: var(--lt-card); border-radius: 0.35rem; }
.md-search__input { color: var(--lt-text); }
.md-search__input::placeholder, .md-search__icon { color: var(--lt-muted); }
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--lt-text); font-weight: 600; }

/* Tables and admonitions in the same soft card style */
.md-typeset table:not([class]) { border: 0; border-radius: 0.45rem; overflow: hidden; background: var(--lt-card);
  box-shadow: none; font-size: 0.68rem; }
.md-typeset table:not([class]) th { background: var(--lt-card-2); color: var(--lt-muted); font-weight: 600; }
.md-typeset table:not([class]) td { border-top: 1px solid var(--lt-line); }
.md-typeset .admonition, .md-typeset details { border-radius: 0.45rem; border-width: 0; background: var(--lt-card);
  box-shadow: none; }

/* Buttons on the home page: always visible, readable on hover (Material's defaults draw a secondary
   button in the header colour, which disappears on the dark page) */
.md-typeset .md-button { border-radius: 0.4rem; border: 1px solid var(--lt-line); background: var(--lt-card);
  color: var(--lt-text); font-weight: 600; }
.md-typeset .md-button:hover, .md-typeset .md-button:focus { border-color: var(--lt-muted); background: var(--lt-card-2);
  color: var(--lt-text); }
.md-typeset .md-button--primary { background: var(--lt-hi-1); border-color: var(--lt-hi-1); color: var(--lt-hi-text); }
.md-typeset .md-button--primary:hover, .md-typeset .md-button--primary:focus { background: #cbe8fb; border-color: #cbe8fb;
  color: var(--lt-hi-text); }

/* Screenshots side by side, on a card so the popup's own background stands out from the page's */
.md-typeset .shots { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: flex-start;
  padding: 1.2rem; border-radius: .55rem; background: var(--lt-card); border: 1px solid var(--lt-line); }
.md-typeset .shots img { border-radius: .4rem; box-shadow: 0 0 0 1px var(--lt-line), 0 .4rem 1.2rem rgba(0, 0, 0, .28); }

/* Sidebar: section headings are small grey labels, pages are links with a hover highlight, and the
   current page is a highlighted row with an accent bar (desktop layout; the phone menu keeps
   Material's own). */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    font-size: .62rem;
    font-weight: 700;
    color: var(--lt-nav-label);
    /* Material's glow under this sticky title spills over the first page (Home) */
    box-shadow: none;
    margin-bottom: .15rem;
  }
  .md-nav--primary .md-nav__item--section > .md-nav__link {
    margin-top: 1.1rem;
    padding: 0 .6rem;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lt-nav-label);
    cursor: default;
  }
  .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list { margin-top: .25rem; }
  .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item { padding: 0; }
  .md-nav--primary a.md-nav__link {
    margin-top: .1rem;
    padding: .3rem .6rem;
    border-radius: .3rem;
    color: var(--lt-nav-link);
    transition: background-color .15s ease, color .15s ease;
  }
  .md-nav--primary a.md-nav__link:hover,
  .md-nav--primary a.md-nav__link:focus-visible {
    background: var(--lt-card);
    color: var(--lt-text);
  }
  .md-nav--primary a.md-nav__link--active {
    background: var(--lt-card-2);
    color: var(--lt-text);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--lt-accent);
  }
}