/* =====================================================================
   Vol[atile] NixOS — documentation theme
   Palette extracted from assets/banner.png:
     base    #07200F   deep forest / circuit board
     surface #0B2A14
     green   #3E9E40 -> #65AA6F   (snowflake + traces)
     glow    #B8DAB7   (lit edges)
     gold    #C7AA33 / #B1A142    (nebula accent)
     text    #D6E6DA   (sage white)
   ===================================================================== */

:root {
  /* content canvas: neutral charcoal (faint warm) so green reads as ACCENT */
  --vol-base:    #101311;
  --vol-surface: #181c19;
  --vol-surface-2: #1f2420;
  /* green chrome: header/tabs sit ABOVE the neutral page as a distinct band */
  --vol-header:   #0b3019;
  --vol-header-2: #114a23;
  --vol-tabs:     #0e2716;
  --vol-line:    #2a5a3a;
  --vol-green:   #3e9e40;
  --vol-green-2: #65aa6f;
  --vol-neon:    #4de07a;
  --vol-glow:    #b8dab7;
  --vol-gold:    #c7aa33;
  --vol-gold-2:  #b1a142;
  --vol-text:    #d6e6da;
  --vol-muted:   #93a59a;
}

/* ---- Dark scheme (default) ---------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 145;

  --md-default-bg-color:        var(--vol-base);
  --md-default-bg-color--light: var(--vol-surface);
  --md-default-bg-color--lighter: var(--vol-surface-2);
  --md-default-fg-color:        var(--vol-text);
  --md-default-fg-color--light: #c2d6c8;
  --md-default-fg-color--lighter: #8fae98;
  --md-default-fg-color--lightest: #2a5a3a;

  --md-primary-fg-color:        #0e3a1c;
  --md-primary-fg-color--light: #14502a;
  --md-primary-fg-color--dark:  #07200F;
  --md-primary-bg-color:        var(--vol-glow);
  --md-primary-bg-color--light: #d6e6da;

  --md-accent-fg-color:         var(--vol-neon);
  --md-accent-fg-color--transparent: rgba(77, 224, 122, 0.12);

  --md-typeset-color:           var(--vol-text);
  --md-typeset-a-color:         var(--vol-green-2);

  --md-code-bg-color:           #0c0f0d;
  --md-code-fg-color:           #cfe6d4;

  --md-footer-bg-color:         #0b1a12;
  --md-footer-bg-color--dark:   #081410;
}

/* ---- Light scheme (defined for completeness) ---------------------- */
[data-md-color-scheme="vol-light"] {
  --md-primary-fg-color: #14502a;
  --md-accent-fg-color: #1c7a3c;
  --md-typeset-a-color: #1c7a3c;
  --md-default-bg-color: #f3f7f3;
}

/* ---- Header: subtle circuit-board gradient ------------------------ */
.md-header {
  background: linear-gradient(90deg, var(--vol-header) 0%, var(--vol-header-2) 70%, #15511f 100%);
  box-shadow: 0 0 0 1px rgba(77, 224, 122, 0.20), 0 2px 16px rgba(0, 0, 0, 0.7);
}
.md-tabs {
  background: var(--vol-tabs);
  border-bottom: 1px solid rgba(77, 224, 122, 0.18);
}

/* ---- Links + accents ---------------------------------------------- */
.md-typeset a {
  color: var(--vol-green-2);
  text-decoration-color: rgba(101, 170, 111, 0.4);
}
.md-typeset a:hover {
  color: var(--vol-neon);
  text-shadow: 0 0 8px rgba(77, 224, 122, 0.45);
}

/* ---- Headings: monospace, neon underline -------------------------- */
.md-typeset h1,
.md-typeset h2 {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  color: var(--vol-glow);
  font-weight: 700;
}
.md-typeset h2 {
  color: var(--vol-green-2);
  border-bottom: 1px solid rgba(77, 224, 122, 0.22);
  padding-bottom: 0.2em;
}
.md-typeset h3 { color: var(--vol-gold); }

/* ---- Code blocks: circuit-board panel ----------------------------- */
.md-typeset pre > code {
  border: 1px solid rgba(77, 224, 122, 0.14);
  border-radius: 6px;
}
.md-typeset code {
  border-radius: 4px;
}

/* ---- Inline code accent ------------------------------------------- */
.md-typeset :not(pre) > code {
  background-color: rgba(77, 224, 122, 0.08);
  color: #b6e8c2;
}

/* ---- Tables ------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid rgba(77, 224, 122, 0.16);
}
.md-typeset table:not([class]) th {
  background: #0e3a1c;
  color: var(--vol-glow);
}
.md-typeset table:not([class]) tr:hover {
  background: rgba(77, 224, 122, 0.05);
}

/* ---- Admonitions: gold + green family ----------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--vol-surface);
}
.md-typeset .admonition.note,
.md-typeset .admonition.abstract {
  border-color: var(--vol-green);
}
.md-typeset .admonition.warning,
.md-typeset .admonition.caution {
  border-color: var(--vol-gold);
}
.md-typeset .admonition.danger {
  border-color: #d35454;
}

/* ---- Search + nav active ------------------------------------------ */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--vol-neon);
}

/* ---- Buttons ------------------------------------------------------ */
.md-typeset .md-button {
  border-color: var(--vol-green);
  color: var(--vol-glow);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--vol-green);
  border-color: var(--vol-neon);
  color: #061a0d;
  box-shadow: 0 0 16px rgba(77, 224, 122, 0.4);
}
.md-typeset .md-button--primary {
  background: linear-gradient(90deg, #1c7a3c, #3e9e40);
  border-color: var(--vol-neon);
  color: #051409;
}

/* ---- Hero (home page) --------------------------------------------- */
.vol-hero {
  position: relative;
  margin: -1.2rem -0.8rem 1.5rem;
  padding: 2.4rem 1.2rem 2rem;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 85% 30%, rgba(199, 170, 51, 0.18), transparent 55%),
    radial-gradient(90% 90% at 15% 80%, rgba(77, 224, 122, 0.14), transparent 60%),
    linear-gradient(160deg, #07200F 0%, #0b2a16 100%);
  border: 1px solid rgba(77, 224, 122, 0.18);
}
.vol-hero img.vol-banner {
  width: 100%;
  max-width: 980px;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}
.vol-hero .vol-tagline {
  margin-top: 1rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--vol-muted);
  letter-spacing: 0.04em;
}
.vol-badges { margin: 0.6rem 0 0; }
.vol-badges img { margin: 2px; vertical-align: middle; }

/* ---- Feature grid cards ------------------------------------------- */
.vol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0;
}
.vol-card {
  border: 1px solid rgba(77, 224, 122, 0.18);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--vol-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vol-card:hover {
  border-color: var(--vol-neon);
  box-shadow: 0 0 18px rgba(77, 224, 122, 0.18);
  transform: translateY(-2px);
}
.vol-card h3 {
  margin: 0 0 0.4rem;
  color: var(--vol-glow);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
}
.vol-card p { margin: 0; color: var(--vol-muted); font-size: 0.8rem; }

/* ---- Mermaid: tint to palette ------------------------------------- */
.md-typeset .mermaid {
  background: var(--vol-surface);
  border: 1px solid rgba(77, 224, 122, 0.14);
  border-radius: 8px;
  padding: 0.6rem;
}

/* ---- Scrollbar ---------------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #061a0d; }
::-webkit-scrollbar-thumb {
  background: #1c5230;
  border-radius: 6px;
  border: 2px solid #061a0d;
}
::-webkit-scrollbar-thumb:hover { background: var(--vol-green); }