/* Winner AI identity for the documentation site.

   The tokens and their values are the ones in
   backend/fleetview_backend/templates/base.html, which is the source of truth
   for the control plane; deploy/caddy/brand/brand.css already mirrors them for
   the dashboard and this is the third mirror. Change all three together.
   Never introduce a hex value here that is not in that file.

   Dark is the brand default, so the palette lives on the scheme Material
   loads first and light is the override. Material addresses its own variables,
   so each one is pointed at a brand token rather than restated. */
@import url('external/fonts.googleapis.com/css2.6b5407ab.css');

:root {
  --ground: #000000;
  --surface: #141414;
  --surface2: #171717;
  --ink: #FFFFFF;
  --dim: #8A8A8A;
  --muted: #6E6E6E;
  --line: #2A2A2A;
  --line-soft: #1F1F1F;
  --ok: #5CC492;
  --warn: #DBA65A;
  --crit: #E58787;

  --md-text-font: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Semantic hues are re-tuned per theme, not reused: the dark set is
   unreadable on white. */
[data-md-color-scheme="winner-light"] {
  --ground: #FFFFFF;
  --surface: #F6F6F6;
  --surface2: #FFFFFF;
  --ink: #000000;
  --dim: #4A4A4A;
  --muted: #6E6E6E;
  --line: #E2E2E2;
  --line-soft: #EFEFEF;
  --ok: #127A4A;
  --warn: #8A5A10;
  --crit: #B33A38;
}

[data-md-color-scheme="winner"],
[data-md-color-scheme="winner-light"] {
  --md-default-bg-color: var(--ground);
  --md-default-bg-color--light: var(--surface);
  --md-default-bg-color--lighter: var(--surface2);
  --md-default-bg-color--lightest: var(--surface2);

  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--dim);
  --md-default-fg-color--lighter: var(--muted);
  --md-default-fg-color--lightest: var(--line);

  --md-typeset-color: var(--ink);
  --md-typeset-a-color: var(--ink);

  --md-code-bg-color: var(--surface);
  --md-code-fg-color: var(--ink);

  /* The header stays black in both themes so one white wordmark is correct
     everywhere; the control plane flips its sidebar instead, which it can
     because its wordmark inherits currentColor and this one is a file. */
  --md-primary-fg-color: var(--ground);
  --md-primary-bg-color: var(--ink);
  --md-accent-fg-color: var(--ink);

  --md-footer-bg-color: var(--ground);
  --md-footer-bg-color--dark: var(--ground);
  --md-footer-fg-color: var(--ink);

  --md-admonition-bg-color: var(--surface);
  --md-admonition-fg-color: var(--ink);
}

[data-md-color-scheme="winner"] {
  color-scheme: dark;
}

[data-md-color-scheme="winner-light"] {
  color-scheme: light;
}

[data-md-color-scheme="winner"] .md-header,
[data-md-color-scheme="winner-light"] .md-header {
  background: #000000;
  color: #FFFFFF;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* Square corners are part of the identity, not a preference. Material rounds
   and shadows cards, code, tables, admonitions and the search field by
   default, and rounded corners read as a different product. */
[data-md-color-scheme="winner"] .md-typeset code,
[data-md-color-scheme="winner"] .md-typeset pre > code,
[data-md-color-scheme="winner"] .md-typeset table:not([class]),
[data-md-color-scheme="winner"] .md-typeset .admonition,
[data-md-color-scheme="winner"] .md-typeset details,
[data-md-color-scheme="winner"] .md-search__form,
[data-md-color-scheme="winner"] .md-search__output,
[data-md-color-scheme="winner-light"] .md-typeset code,
[data-md-color-scheme="winner-light"] .md-typeset pre > code,
[data-md-color-scheme="winner-light"] .md-typeset table:not([class]),
[data-md-color-scheme="winner-light"] .md-typeset .admonition,
[data-md-color-scheme="winner-light"] .md-typeset details,
[data-md-color-scheme="winner-light"] .md-search__form,
[data-md-color-scheme="winner-light"] .md-search__output {
  border-radius: 0;
  box-shadow: none;
}

/* The eyebrow treatment from the product: mono, small, wide tracking, upper.
   Section labels in the navigation are the same kind of thing as the sidebar
   group labels they sit opposite in a reader's memory. */
.md-nav__title,
.md-nav--secondary .md-nav__title {
  font-family: var(--md-code-font);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Monochrome removes colour as the link affordance, so the underline has to
   carry it alone rather than appear on hover. */
.md-typeset a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.md-typeset a:hover {
  background: var(--surface);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--line);
}

.md-typeset table:not([class]) th {
  background: var(--surface);
  font-weight: 600;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Material gives every admonition type its own hue: notes are blue, tips
   green, and the title bar is a tint of it. The identity allows no accent
   colour, so the whole family is reset to surface and line and only the left
   edge and the icon carry --ok / --warn / --crit, which are the three colours
   it does allow. Each type sets its hue with !important in the theme, so
   these have to as well. */
.md-typeset .admonition,
.md-typeset details {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line) !important;
  border-left: 2px solid var(--dim) !important;
  font-size: inherit;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--surface2) !important;
  color: var(--ink);
  border: 0 !important;
  font-weight: 600;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--dim) !important;
}

.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset details.warning,
.md-typeset details.caution {
  border-left-color: var(--warn) !important;
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .caution > .admonition-title::before,
.md-typeset .warning > summary::before,
.md-typeset .caution > summary::before {
  background-color: var(--warn) !important;
}

.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset details.danger,
.md-typeset details.failure {
  border-left-color: var(--crit) !important;
}

.md-typeset .danger > .admonition-title::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .danger > summary::before,
.md-typeset .failure > summary::before {
  background-color: var(--crit) !important;
}

.md-typeset .admonition.tip,
.md-typeset .admonition.success,
.md-typeset details.tip,
.md-typeset details.success {
  border-left-color: var(--ok) !important;
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .success > .admonition-title::before,
.md-typeset .tip > summary::before,
.md-typeset .success > summary::before {
  background-color: var(--ok) !important;
}

/* The "Copy page as Markdown" button (copy-markdown.js) is chrome, so it
   takes the eyebrow treatment and the line, and no colour of its own. On
   paper there is nothing to copy, so a printed page leaves it out. */
.md-typeset .winner-copy-page {
  float: right;
  margin: 0 0 0.8rem 0.8rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--md-code-font);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
}

.md-typeset .winner-copy-page:hover,
.md-typeset .winner-copy-page:focus-visible {
  color: var(--ink);
  border-color: var(--dim);
}

@media print {
  .md-typeset .winner-copy-page {
    display: none;
  }
}

/* The PDF's running footer (mkdocs-print-site-plugin's chapter name and page
   number) is drawn in the page margin, which takes nothing from the body's
   font, so without this it prints in the browser's default serif. */
@page {
  font-family: "Archivo", sans-serif;
}