/* ==========================================================================
   Bitcoin After Life — manual theme
   Palette taken from the bitcoin-after.life landing page ("Slate" system).
   Change a value here and it propagates through the whole manual.
   ========================================================================== */

:root {
  --bal-accent:       #2d6cdf;
  --bal-accent-soft:  #e6eefc;
  --bal-accent-line:  #cfe0fb;
  --bal-accent-dark:  #2559b8;
  --bal-ink:          #1a2027;
  --bal-muted:        #5b6672;
  --bal-bg:           #eef1f4;
  --bal-panel:        #ffffff;
  --bal-line:         #dfe4ea;
  --bal-line-strong:  #cbd2da;
  --bal-ok:           #1f9d57;
  --bal-ok-soft:      #e3f4ea;
  --bal-warn:         #b5701b;
  --bal-warn-soft:    #fbf0df;
  --bal-btc:          #f7931a;
  --bal-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* -------- Light scheme ---------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:          var(--bal-accent);
  --md-primary-fg-color--light:   #4f85e6;
  --md-primary-fg-color--dark:    var(--bal-accent-dark);
  --md-primary-bg-color:          #ffffff;
  --md-primary-bg-color--light:   rgba(255, 255, 255, .7);

  --md-accent-fg-color:           var(--bal-accent-dark);
  --md-accent-fg-color--transparent: var(--bal-accent-soft);
  --md-accent-bg-color:           #ffffff;

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

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

  --md-code-bg-color:             #e4e9ef;
  --md-code-fg-color:             var(--bal-ink);

  --md-footer-bg-color:           var(--bal-ink);
  --md-footer-bg-color--dark:     #12171c;
}

/* Content sits on white panels, like the cards on the website. */
[data-md-color-scheme="default"] .md-main__inner .md-content__inner {
  background: var(--bal-panel);
  border: 1px solid var(--bal-line);
  border-radius: 10px;
  padding: 8px 28px 40px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
}

/* -------- Dark scheme ----------------------------------------------------- */
/* The website has no dark mode; this is a faithful dark counterpart built
   around the same accent blue. */
[data-md-color-scheme="slate"] {
  --md-hue: 215;

  --md-primary-fg-color:          #5b8ce8;
  --md-primary-fg-color--light:   #7ea6ee;
  --md-primary-fg-color--dark:    var(--bal-accent);
  --md-primary-bg-color:          #0f1419;

  --md-accent-fg-color:           #7ea6ee;
  --md-accent-fg-color--transparent: rgba(45, 108, 223, .12);

  --md-default-bg-color:          #12171c;
  --md-typeset-a-color:           #7ea6ee;

  --md-code-bg-color:             #1a2027;
  --md-footer-bg-color:           #0f1419;
}

[data-md-color-scheme="slate"] .md-main__inner .md-content__inner {
  background: #171d24;
  border: 1px solid #262e37;
  border-radius: 10px;
  padding: 8px 28px 40px;
}

/* -------- Typography ------------------------------------------------------ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -.015em;
}
.md-typeset h1 { color: var(--md-default-fg-color); }
.md-typeset h2 { border-bottom: 1px solid var(--md-default-fg-color--lightest); padding-bottom: .3em; }

.md-typeset code,
.md-typeset pre > code { font-family: var(--bal-mono); }

/* Code blocks use the site's dark "ink" background in both schemes. */
[data-md-color-scheme="default"] .md-typeset pre > code {
  background: var(--bal-ink);
  color: #e8edf3;
}

/* -------- Tables ---------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  font-size: .78rem;
}
.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* -------- Admonitions mapped to the site's semantic colours --------------- */
.md-typeset .admonition,
.md-typeset details { border-radius: 10px; font-size: .76rem; }

:root {
  --md-admonition-icon--note: var(--md-admonition-icon--abstract);
}
.md-typeset .admonition.info,
.md-typeset .admonition.note,
.md-typeset details.info,
.md-typeset details.note      { border-color: var(--bal-accent); }
.md-typeset .info > .admonition-title,
.md-typeset .note > .admonition-title,
.md-typeset .info > summary,
.md-typeset .note > summary   { background: var(--bal-accent-soft); }

.md-typeset .admonition.tip,
.md-typeset details.tip       { border-color: var(--bal-ok); }
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary    { background: var(--bal-ok-soft); }

.md-typeset .admonition.warning,
.md-typeset details.warning   { border-color: var(--bal-warn); }
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary { background: var(--bal-warn-soft); }

[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > summary,
[data-md-color-scheme="slate"] .md-typeset .note > summary   { background: rgba(45, 108, 223, .16); }
[data-md-color-scheme="slate"] .md-typeset .tip > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .tip > summary     { background: rgba(31, 157, 87, .16); }
[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .warning > summary { background: rgba(181, 112, 27, .18); }

/* FAQ accordions read better with a little separation. */
.md-typeset details { margin-bottom: .5rem; }

/* -------- Screenshots ----------------------------------------------------- */
img.screenshot {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20, 30, 50, .08);
  max-width: 100%;
}
img.screenshot + em,
p > img.screenshot + em {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  font-style: normal;
  color: var(--md-default-fg-color--light);
}

/* -------- Misc ------------------------------------------------------------ */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card { border-radius: 10px; }

.md-typeset a.btc,
.md-typeset .btc { color: var(--bal-btc); font-weight: 700; }

:focus-visible { outline: 2px solid var(--bal-accent); outline-offset: 2px; }


/* -------- Brand ----------------------------------------------------------- */
/* Header sits on the accent blue, so it uses the white mark directly
   (docs/assets/logo.svg is a copy of logo-mark-white.svg). */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* Homepage lockup: the mark plus the name set in Inter — the same construction
   the website uses in its top bar, and immune to the Optima dependency of the
   SVG wordmark. */
.bal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin: 1.4rem 0 2.2rem;
  text-align: center;
}
.bal-hero img { width: 116px; height: auto; }
.bal-hero .name {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--md-default-fg-color);
}
.bal-hero .tagline {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}
/* Swap black / white mark with the colour scheme. */
.bal-hero .logo-dark  { display: none; }
[data-md-color-scheme="slate"] .bal-hero .logo-light { display: none; }
[data-md-color-scheme="slate"] .bal-hero .logo-dark  { display: inline; }