/* fxquinox docs theme - align Zensical (and its Mermaid diagrams) with the
   app's "refined control room" look: deep ink, hairline structure, one Klein
   Blue accent, Archivo / JetBrains Mono. */

:root {
  --fxq-acc: #3a5bf0;       /* Klein Blue (lifted, readable on ink) */
  --fxq-acc-deep: #002fa7;  /* true IKB */
  --md-mermaid-font-family: "Archivo", system-ui, sans-serif;
}

/* ---- Dark scheme: match the app exactly ---- */
[data-md-color-scheme="slate"] {
  /* accent + links in Klein Blue */
  --md-accent-fg-color: var(--fxq-acc);
  --md-typeset-a-color: #6781f6;

  /* Chrome surfaces - repaint Zensical's slate gray to the app's deep ink.
     "modern" theme chrome variables: */
  --color-background: #0a0c11;
  --color-background-subtle: #0e1118;
  --color-foreground: #e7eaf2;
  --color-backdrop: rgba(4, 6, 10, 0.66);

  /* content/typeset surfaces (Material-compatible variables): */
  --md-default-bg-color: #0a0c11;
  --md-default-bg-color--light: #0e1118;
  --md-default-bg-color--lighter: #141823;
  --md-default-bg-color--lightest: #1b2130;
  --md-default-fg-color: #e7eaf2;
  --md-default-fg-color--light: #c3cad9;
  --md-default-fg-color--lighter: #97a0b3;
  --md-default-fg-color--lightest: #232a3a;

  /* header / primary bar */
  --md-primary-fg-color: #0e1118;
  --md-primary-bg-color: #e7eaf2;
  --md-primary-bg-color--light: #97a0b3;

  /* code blocks */
  --md-code-bg-color: #0e1118;
  --md-code-bg-color--light: #141823;
  --md-code-bg-color--lighter: #1b2130;
  --md-code-fg-color: #dbe1ee;

  /* admonitions sit on a slightly elevated ink */
  --md-admonition-bg-color: #0e1118;
  --md-admonition-fg-color: #e7eaf2;

  --md-accent-bg-color: #f4f6ff;
  --md-accent-fg-color--transparent: rgba(58, 91, 240, 0.1);

  /* Mermaid: ink panels · Klein hairline borders · light text · subtle edges */
  --md-mermaid-node-bg-color: #141823;
  --md-mermaid-node-fg-color: var(--fxq-acc);
  --md-mermaid-label-bg-color: #141823;
  --md-mermaid-label-fg-color: #e7eaf2;
  --md-mermaid-edge-color: #5d6678;

  --md-mermaid-sequence-actor-bg-color: #141823;
  --md-mermaid-sequence-actor-border-color: var(--fxq-acc);
  --md-mermaid-sequence-actor-fg-color: #e7eaf2;
  --md-mermaid-sequence-actor-line-color: #5d6678;
  --md-mermaid-sequence-actorman-bg-color: #141823;
  --md-mermaid-sequence-actorman-line-color: var(--fxq-acc);
  --md-mermaid-sequence-box-bg-color: #0e1118;
  --md-mermaid-sequence-box-fg-color: #e7eaf2;
  --md-mermaid-sequence-label-bg-color: #1b2130;
  --md-mermaid-sequence-label-fg-color: #e7eaf2;
  --md-mermaid-sequence-loop-bg-color: #0e1118;
  --md-mermaid-sequence-loop-border-color: var(--fxq-acc);
  --md-mermaid-sequence-loop-fg-color: #e7eaf2;
  --md-mermaid-sequence-message-fg-color: #c7ccda;
  --md-mermaid-sequence-message-line-color: #5d6678;
  --md-mermaid-sequence-note-bg-color: #1b2130;
  --md-mermaid-sequence-note-border-color: #232a3a;
  --md-mermaid-sequence-note-fg-color: #e7eaf2;
  --md-mermaid-sequence-number-bg-color: var(--fxq-acc);
  --md-mermaid-sequence-number-fg-color: #f4f6ff;
}

/* ---- Light scheme: coordinated variant (light panels, IKB borders) ---- */
[data-md-color-scheme="default"] {
  --md-accent-fg-color: var(--fxq-acc);
  --md-typeset-a-color: var(--fxq-acc-deep);

  --md-mermaid-node-bg-color: #eef1fb;
  --md-mermaid-node-fg-color: var(--fxq-acc-deep);
  --md-mermaid-label-bg-color: #eef1fb;
  --md-mermaid-label-fg-color: #0a0c11;
  --md-mermaid-edge-color: #9aa3b8;
}

/* Rounded node corners to echo the app's --radius (7px). */
.mermaid g.node rect,
.mermaid g.node polygon,
.mermaid g.cluster rect,
.mermaid .er.entityBox,
.mermaid .node rect {
  rx: 6px;
  ry: 6px;
}

/* Slightly crisper hairline borders on diagram nodes. */
.mermaid g.node rect,
.mermaid g.cluster rect {
  stroke-width: 1.25px;
}

/* ---- Landing page: call-to-action buttons ---- */
.md-typeset .md-button {
  display: inline-block;
  margin: 0.3em 0.5em 0.3em 0;
  padding: 0.5em 1.15em;
  border: 1px solid #2a3346;
  border-radius: 7px;
  color: #e7eaf2;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease,
    transform 0.06s ease;
}
.md-typeset .md-button:hover {
  background: #141823;
  border-color: #3a5bf0;
  color: #fff;
  transform: translateY(-1px);
}
.md-typeset .md-button--primary {
  background: #002fa7;
  border-color: #3a5bf0;
  color: #f4f6ff;
}
.md-typeset .md-button--primary:hover {
  background: #2a40b0;
  border-color: #6781f6;
}

/* ---- Grid cards: subtle lift + accent on hover ---- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :not(ul) {
  transition: border-color 0.12s ease, transform 0.08s ease,
    box-shadow 0.12s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > :not(ul):hover {
  border-color: #3a5bf0;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.8);
}

/* Card title icons in the accent colour. */
.md-typeset .grid.cards .twemoji svg,
.md-typeset .grid.cards .lucide svg {
  fill: #6781f6;
}

/* ---- Abbreviation tooltips: dotted accent underline ---- */
.md-typeset abbr {
  text-decoration: none;
  border-bottom: 1px dotted #6781f6;
  cursor: help;
}

/* Keep the header logo crisp and a touch larger. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.45rem;
  width: 1.45rem;
}

/* ---- Footer: legible copyright on ink ---- */
[data-md-color-scheme="slate"] {
  --md-footer-bg-color: #0e1118;
  --md-footer-bg-color--dark: #0a0c11;
  --md-footer-fg-color: #e7eaf2;
  --md-footer-fg-color--light: #c3cad9;
  --md-footer-fg-color--lighter: #9aa3b8;
}
.md-footer-meta {
  background: #0a0c11;
  border-top: 1px solid #1a202c;
}
.md-copyright,
.md-copyright__highlight {
  color: #9aa3b8;
}

/* ---- App screenshots ---- */
.md-typeset img.shot {
  display: block;
  width: 100%;
  border-radius: 9px;
  border: 1px solid #232a3a;
  box-shadow: 0 20px 55px -22px rgba(0, 0, 0, 0.9);
}
.md-typeset figure {
  margin: 1.4rem 0;
}
.md-typeset figcaption {
  margin-top: 0.55rem;
  color: #9aa3b8;
  font-size: 0.78rem;
}

/* ---- mkdocstrings symbol-type icons, tinted to the palette ---- */
[data-md-color-scheme="slate"] {
  --doc-symbol-class-fg-color: #a78bfa;
  --doc-symbol-function-fg-color: #36d39a;
  --doc-symbol-method-fg-color: #36d39a;
  --doc-symbol-attribute-fg-color: #f0a13a;
  --doc-symbol-module-fg-color: #5b9cf8;
  --doc-symbol-parameter-fg-color: #9aa3b8;
}
/* mkdocstrings labels (property/classmethod/...) as subtle accent chips */
.md-typeset .doc-labels .doc-label {
  background: rgba(58, 91, 240, 0.14);
  color: #9fb4ff;
  border-radius: 5px;
}