/* homebot.sh docs: docmd's default theme, recoloured to match the homepage
   (sepia album paper, Neatpik's mint, Young Serif headings).
   Loaded through theme.customCss in docmd.config.json. The fonts live with the
   homepage, at the site root, so this only works when served under homebot.sh
   (or `bun run preview`); `docmd dev` falls back to the system fonts. */

@font-face {
  font-family: "Young Serif";
  src: url(/assets/fonts/young-serif-latin-400-normal.woff2?v=6ba68b99) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(/assets/fonts/libre-franklin-latin-wght-normal.woff2?v=52e60585) format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(/assets/fonts/libre-franklin-latin-wght-italic.woff2?v=c9fb9170) format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --hb-serif: "Young Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --bg-color: #f5efe1;
  --text-color: #2e241b;
  --text-muted: #6a5845;
  --text-heading: #2a2017;
  --link-color: #2a7a62;
  --link-color-hover: #1d5947;
  --border-color: #e2d6bc;
  --border-color-hover: #d0c09f;
  --header-bg: rgb(245 239 225 / .88);
  --header-border: #e2d6bc;
  --sidebar-bg: #ede3cd;
  --sidebar-text: #3f3226;
  --sidebar-link-active-bg: rgb(143 220 194 / .38);
  --sidebar-link-active-text: #10241e;
  --sidebar-group-bg: rgb(42 32 23 / .045);
  --code-bg: #ece3d0;
  --code-text: #2a2017;
  --font-family-sans: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, system-ui, sans-serif;
  --glow-color: rgb(143 220 194 / .22);
  --glow-color-strong: rgb(143 220 194 / .36);
  --halo-soft: 0 0 0 4px rgb(42 122 98 / .16);
  --scrollbar-thumb: #d6c7a8;

  --menubar-bg: #ddcba6;
  --menubar-border: #cbb68e;
  --menubar-text: #2a2017;
  --menubar-link-hover-bg: rgb(42 32 23 / .08);
}

:root[data-theme="dark"] {
  --bg-color: #1a1511;
  --text-color: #ddd3bf;
  --text-muted: #a8987f;
  --text-heading: #ece2cc;
  --link-color: #8fdcc2;
  --link-color-hover: #b5ebd8;
  --border-color: #33291f;
  --border-color-hover: #45382b;
  --header-bg: rgb(26 21 17 / .85);
  --header-border: #33291f;
  --sidebar-bg: #201a15;
  --sidebar-text: #cfc4ae;
  --sidebar-link-active-bg: rgb(143 220 194 / .14);
  --sidebar-link-active-text: #ffffff;
  --sidebar-group-bg: rgb(236 226 204 / .04);
  --code-bg: #241d17;
  --code-text: #ece3d0;
  --glow-color: rgb(143 220 194 / .14);
  --glow-color-strong: rgb(143 220 194 / .24);
  --halo-soft: 0 0 0 4px rgb(143 220 194 / .18);
  --scrollbar-thumb: #33291f;

  --menubar-bg: #241d17;
  --menubar-border: #33291f;
  --menubar-text: #ece2cc;
  --menubar-link-hover-bg: rgb(236 226 204 / .08);
}

.main-content h1,
.main-content h2,
.main-content h3,
.sidebar-header h1,
.menubar-brand-text {
  font-family: var(--hb-serif);
  font-weight: 400;
  font-variant-numeric: lining-nums; /* Young Serif's figures are old-style by default */
}
.main-content h1 { letter-spacing: -.012em; }
.main-content h2 { letter-spacing: -.006em; }

.menubar-brand-text { font-size: 1.15rem; }
/* docmd hides the brand text on phones (it expects a logo next to it); here the
   text is the only content of the link back to the homepage, so keep it. */
.docmd-menubar .menubar-brand-text { display: inline; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* callouts in the album's colours: info is sepia, tip is Neatpik's mint */
.callout-info { --callout-color: #9a7445; }
.callout-success,
.callout-tip { --callout-color: #2a9c78; }
.callout-warning { --callout-color: #c98a1e; }
.callout-danger { --callout-color: #b8452f; }
:root[data-theme="dark"] .callout-info { --callout-color: #c9a46c; }
:root[data-theme="dark"] .callout-success,
:root[data-theme="dark"] .callout-tip { --callout-color: #8fdcc2; }

@media (max-width: 768px) {
  /* On phones docmd turns the fixed menubar into a sticky one but keeps the
     padding that made room for it, which leaves an empty band at the top. */
  body.has-menubar-top { padding-top: 0; }
}