/* Shelf & Shaker's gold-on-midnight look for the help site. Values mirror DESIGN.md — change both together. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-display: swap; src: url("/static/fonts/playfair-display-600.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url("/static/fonts/playfair-display-700.woff2") format("woff2"); }

:root, [data-md-color-scheme="slate"] {
  --bb-primary: #C98F35;
  --bb-primary-container: #E2B15A;
  --bb-primary-soft: #2A2110;
  --bb-surface: #05090F;
  --bb-surface-container: #0B1622;
  --bb-surface-container-low: #03060A;
  --bb-on-surface: #FBF5E0;
  --bb-on-surface-variant: #A9B4C2;
  --bb-outline: #1F3347;
  --bb-serif: "Playfair Display", Georgia, serif;

  --md-text-font-family: "Inter", 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(5, 9, 15, .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(169, 180, 194, .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, 143, 53, .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(31, 51, 71, .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,143,53,.16), transparent 60%),
    radial-gradient(800px 600px at 4% 100%, rgba(201,143,53,.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: Playfair Display for headings, Inter 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 #5C7086; 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); }