/* Foxlogi guide theme — mirrors the app's graphite palette
   (frontend/src/themes/graphite.js) so the docs read as part of the product. */

:root {
  --fx-accent:        #e0b070;
  --fx-accent-hover:  #ecc388;
  --fx-accent-weak:   rgba(224, 176, 112, 0.14);
  --fx-accent-line:   rgba(224, 176, 112, 0.32);
}

/* ---------- dark scheme: the app's real canvas colours ---------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:            #0c0e11;  /* bg0 — app canvas   */
  --md-default-bg-color--light:     #121519;  /* bg1 — sider/topbar */
  --md-default-bg-color--lighter:   #181c21;  /* bg2 — panels       */
  --md-default-fg-color:            #ecedef;  /* text1 */
  --md-default-fg-color--light:     #a8adb4;  /* text2 */
  --md-default-fg-color--lighter:   #6a7078;  /* text3 */
  --md-default-fg-color--lightest:  #242a31;  /* line1 */

  --md-primary-fg-color:            #121519;
  --md-primary-bg-color:            #ecedef;

  --md-accent-fg-color:             var(--fx-accent);
  --md-accent-fg-color--transparent: var(--fx-accent-weak);
  --md-typeset-a-color:             var(--fx-accent);

  --md-code-bg-color:               #181c21;
  --md-code-fg-color:               #ecedef;

  --md-footer-bg-color:             #0c0e11;
  --md-footer-bg-color--dark:       #0c0e11;
}

/* Material sets --md-typeset-a-color under [data-md-color-primary], which
   outranks the scheme block above — restate it at equal-or-higher specificity
   so links pick up the app's amber rather than the primary-derived blue. */
[data-md-color-scheme="slate"][data-md-color-primary],
[data-md-color-primary="black"],
[data-md-color-accent] {
  --md-typeset-a-color: var(--fx-accent);
  --md-accent-fg-color: var(--fx-accent);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  border-bottom: 1px solid #242a31;
}

.md-typeset a:hover,
.md-nav__link:hover,
.md-nav__link--active {
  color: var(--fx-accent-hover);
}

/* ---------- screenshots ---------- */
/* Every screenshot is a UI shot with its own dark chrome — a border and a
   little elevation keeps it from bleeding into the page background. */
.md-typeset img[src*="screenshots/"] {
  /* The markdown carries the intrinsic width/height of every screenshot so the
     browser can reserve the right box before the image loads (no layout shift).
     Those attributes make the image its full 1435px unless CSS scales it back
     down, and `height: auto` is what keeps the aspect ratio while it does. */
  max-width: 100%;
  height: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  margin: 1.1rem 0;
  cursor: zoom-in;
}

.md-typeset img[src*="screenshots/"]:hover {
  border-color: var(--fx-accent-line);
}

/* ---------- tables ---------- */
/* The guide leans hard on comparison tables; make them scannable. */
.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color--lighter);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset table:not([class]) td {
  vertical-align: top;
}

/* Wide tables scroll inside themselves rather than stretching the page. */
.md-typeset__table {
  overflow-x: auto;
}

/* ---------- headings ---------- */
.md-typeset h2 {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.3em;
  margin-top: 2.2em;
}

.md-typeset h3 {
  color: var(--fx-accent);
}

/* ---------- blockquotes used for callouts ---------- */
.md-typeset blockquote {
  border-left: 3px solid var(--fx-accent-line);
  background: var(--fx-accent-weak);
  border-radius: 0 6px 6px 0;
  padding: 0.4rem 1rem;
  color: var(--md-default-fg-color--light);
}

/* ---------- the ASCII supply-chain diagrams ---------- */
.md-typeset pre > code {
  line-height: 1.45;
}

/* ---------- nav ---------- */
.md-nav__item--section > .md-nav__link {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
}