/* Back Bar's "Blue Hour" look for the help site. Values mirror DESIGN.md — change both together. */

@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("/static/fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("/static/fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("/static/fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("/static/fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url("/static/fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("/static/fonts/cormorant-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-display: swap; src: url("/static/fonts/cormorant-garamond-700.woff2") format("woff2"); }

:root, [data-md-color-scheme="slate"] {
  --bb-primary: #C97A4A;
  --bb-primary-container: #E09167;
  --bb-primary-soft: #33241A;
  --bb-surface: #0D1420;
  --bb-surface-container: #16202E;
  --bb-surface-container-low: #080D15;
  --bb-on-surface: #E7E9F0;
  --bb-on-surface-variant: #98A3BE;
  --bb-outline: #26324A;
  --bb-serif: "Cormorant Garamond", Georgia, serif;

  --md-text-font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --md-code-font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  --md-hue: 220;

  --md-default-bg-color: var(--bb-surface);
  --md-default-bg-color--light: rgba(13, 20, 32, .7);
  --md-default-fg-color: var(--bb-on-surface);
  --md-default-fg-color--light: var(--bb-on-surface-variant);
  --md-default-fg-color--lighter: rgba(152, 163, 190, .6);
  --md-default-fg-color--lightest: var(--bb-outline);

  --md-primary-fg-color: var(--bb-surface-container-low);
  --md-primary-fg-color--light: var(--bb-surface-container);
  --md-primary-fg-color--dark: var(--bb-surface-container-low);
  --md-primary-bg-color: var(--bb-on-surface);
  --md-primary-bg-color--light: var(--bb-on-surface-variant);

  --md-accent-fg-color: var(--bb-primary-container);
  --md-accent-fg-color--transparent: rgba(201, 122, 74, .12);
  --md-accent-bg-color: var(--bb-surface-container-low);

  --md-typeset-color: var(--bb-on-surface);
  --md-typeset-a-color: var(--bb-primary);
  --md-typeset-mark-color: var(--bb-primary-soft);
  --md-typeset-table-color: var(--bb-outline);
  --md-typeset-table-color--light: rgba(38, 50, 74, .5);
  --md-code-bg-color: var(--bb-surface-container);
  --md-code-fg-color: var(--bb-on-surface);
  --md-footer-bg-color: var(--bb-surface-container-low);
  --md-footer-bg-color--dark: var(--bb-surface-container-low);
  --md-footer-fg-color: var(--bb-on-surface);
  --md-footer-fg-color--light: var(--bb-on-surface-variant);
  --md-footer-fg-color--lighter: var(--bb-on-surface-variant);
  color-scheme: dark;
}

/* The app's canvas: copper glow over indigo night with a hairline texture. */
body {
  background:
    radial-gradient(1100px 650px at 50% -8%, rgba(201,122,74,.16), transparent 60%),
    radial-gradient(800px 600px at 4% 100%, rgba(201,122,74,.07), transparent 58%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 1px, transparent 4px),
    var(--bb-surface);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
.md-container, .md-main { background: transparent; }

/* Header: the masthead's dark band and double copper rule. */
.md-header {
  background: var(--bb-surface-container-low);
  border-bottom: 3px double var(--bb-primary);
  box-shadow: none;
}
.md-header__topic:first-child, .md-header__title {
  font-family: var(--bb-serif);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 1.15rem;
}
.md-header__button.md-logo img { border-radius: 50%; border: 1px solid var(--bb-primary); }
.md-tabs { background: var(--bb-surface-container-low); }

/* Type: Cormorant for headings, Archivo for everything functional. */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: var(--bb-serif);
  color: var(--bb-on-surface);
  text-wrap: balance;
}
.md-typeset h1 { font-weight: 600; font-size: 2.4em; letter-spacing: .01em; margin-bottom: .6em; }
.md-typeset h2 { font-weight: 700; font-size: 1.6em; }
.md-typeset h3 { font-weight: 700; }
.md-typeset { font-size: .82rem; line-height: 1.65; }
.md-typeset a { text-underline-offset: 2px; }
.md-typeset a:hover { color: var(--bb-primary-container); }

/* Nav labels as the app's uppercase eyebrows. */
.md-nav__title { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; }
.md-nav__link--active, .md-nav__item--active > .md-nav__link { color: var(--bb-primary) !important; }
.md-nav__link:hover { color: var(--bb-primary-container) !important; }

/* Tables and code: raised surfaces, 1px outlines, 2px corners. */
.md-typeset table:not([class]) {
  background: var(--bb-surface-container);
  border: 1px solid var(--bb-outline);
  border-radius: 2px;
  font-size: .78rem;
}
.md-typeset table:not([class]) th {
  font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bb-on-surface-variant); background: var(--bb-surface-container-low);
}
.md-typeset code { border-radius: 2px; }
.md-typeset kbd { background: var(--bb-surface-container); color: var(--bb-on-surface); box-shadow: 0 0 0 1px var(--bb-outline); }
.md-typeset .admonition, .md-typeset details { border-radius: 2px; background: var(--bb-surface-container); }

/* Search: a sunken field with the stronger outline (WCAG 1.4.11). */
.md-search__form { background: var(--bb-surface-container-low); border: 1px solid #646F88; border-radius: 2px; }
.md-search__input { color: var(--bb-on-surface); }
.md-search__output, .md-search__scrollwrap { background: var(--bb-surface-container); }
:focus-visible { outline: 2px solid var(--bb-primary); outline-offset: 2px; }
::selection { background: var(--bb-primary-soft); }