/* ═══════════════════════════════════════════════════════════════
   docs/stylesheets/theme.css

   Overrides Material's CSS custom properties. Requires primary and
   accent set to "custom" in mkdocs.yml, otherwise the theme's own
   palette rules win on specificity.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* the source palette — change these, everything below follows */
  --slate-900: #12161d;
  --slate-850: #161b23;
  --slate-800: #1a2029;
  --slate-700: #232b36;
  --slate-400: #6e7c90;
  --slate-300: #8d9aac;
  --slate-100: #d6dce5;

  --console: #7fb2d9;
  --mastered: #5fbf9b;
  --review: #e0a03c;
  --shaky: #d97a7a;
}

/* ── light mode ──────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--slate-900);
  --md-primary-fg-color--light: var(--slate-700);
  --md-primary-fg-color--dark: #0c1016;
  --md-primary-bg-color: #f3f2ee;
  --md-primary-bg-color--light: #f3f2eeb3;

  --md-accent-fg-color: #1f6ba8;
  --md-accent-fg-color--transparent: #1f6ba81a;

  --md-default-bg-color: #f3f2ee;
  --md-typeset-color: #171b21;
  --md-typeset-a-color: #1f6ba8;
}

/* ── dark mode ───────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--slate-850);
  --md-primary-fg-color--light: var(--slate-700);
  --md-primary-fg-color--dark: var(--slate-900);
  --md-primary-bg-color: var(--slate-100);
  --md-primary-bg-color--light: #d6dce5b3;

  --md-accent-fg-color: var(--console);
  --md-accent-fg-color--transparent: #7fb2d926;

  --md-default-bg-color: var(--slate-900);
  --md-default-fg-color: var(--slate-100);
  --md-default-fg-color--light: var(--slate-300);
  --md-default-fg-color--lighter: var(--slate-400);
  --md-default-fg-color--lightest: var(--slate-700);

  --md-typeset-color: var(--slate-100);
  --md-typeset-a-color: var(--console);

  --md-footer-bg-color: var(--slate-850);
  --md-footer-bg-color--dark: var(--slate-900);

  /* code blocks stay dark in both modes — terminal insets */
  --md-code-bg-color: var(--slate-850);
  --md-code-fg-color: var(--slate-100);
}

/* Code blocks dark even in light mode. Scope the syntax colours here
   so they don't shift when the reader toggles the palette. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-code-bg-color: var(--slate-900);
  --md-code-fg-color: var(--slate-100);
  --md-code-hl-keyword-color: var(--console);
  --md-code-hl-string-color: #a9d6a0;
  --md-code-hl-comment-color: var(--slate-400);
  --md-code-hl-number-color: var(--review);
  --md-code-hl-constant-color: var(--review);
  --md-code-hl-name-color: var(--slate-100);
  --md-code-hl-function-color: #d9a8e0;
  --md-code-hl-variable-color: #d9a8e0;
  --md-code-hl-operator-color: var(--slate-400);
  --md-code-hl-punctuation-color: var(--slate-400);
  --md-code-hl-special-color: var(--shaky);
}

/* ── typography ──────────────────────────────────────────────── */
.md-typeset {
  font-size: 0.82rem;
  line-height: 1.68;
}
.md-typeset h1 {
  /*font-family: var(--md-code-font-family, inherit);*/
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--md-typeset-color);
}
.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 2.4em;
  padding-top: 0.8em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset h3 { font-weight: 600; }

/* tables: rules instead of boxes */
.md-typeset table:not([class]) {
  border: none;
  font-size: 0.72rem;
}
.md-typeset table:not([class]) th {
  background: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--md-default-fg-color);
}
.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* sidebar nav reads like tree output */
.md-nav {
  font-size: 0.72rem;
  /*font-family: var(--md-code-font-family, monospace);*/
  .md-nav { font-family: "Inter", system-ui, sans-serif; }
}
.md-nav__title { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6rem; }

/* ── custom admonition: "lab this" ───────────────────────────
   Use in markdown as:  !!! lab "Build it from empty"          */
:root {
  --md-admonition-icon--lab: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 19h14l-5-8V5h-4v6l-5 8Zm-1 2a1 1 0 0 1-.85-1.53L9 11V5H8V3h8v2h-1v6l5.85 8.47A1 1 0 0 1 20 21H4Z"/></svg>');
}
.md-typeset .admonition.lab,
.md-typeset details.lab {
  border-color: var(--console);
}
.md-typeset .lab > .admonition-title,
.md-typeset .lab > summary {
  background-color: #7fb2d914;
}
.md-typeset .lab > .admonition-title::before,
.md-typeset .lab > summary::before {
  background-color: var(--console);
  -webkit-mask-image: var(--md-admonition-icon--lab);
          mask-image: var(--md-admonition-icon--lab);
}

/* ── status pills ────────────────────────────────────────────
   Use with attr_list:  Ansible inventories { .st .mastered }   */
.md-typeset .st {
  display: inline-block;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 1rem;
  border: 1px solid currentcolor;
}
.md-typeset .mastered { color: var(--mastered); }
.md-typeset .review   { color: var(--review); }
.md-typeset .shaky    { color: var(--shaky); }
.md-typeset .draft    { color: var(--slate-400); }