/* ===========================================================================
   AdminGuy Learning — "Study Notebook" theme.
   Site-wide skin over Material for MkDocs. Pure CSS, no JavaScript, all
   assets same-origin (CSP-safe). Light scheme = "open notebook" (day),
   slate scheme = "notebook at night".
   Spec: docs/superpowers/specs/2026-06-11-notebook-rebrand-design.md
   =========================================================================== */

/* ---- self-hosted fonts (docs/assets/fonts/, OFL-licensed) ---- */
@font-face { font-family: "Bitter"; src: url("../fonts/bitter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("../fonts/bitter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("../fonts/bitter-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-400italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- font stacks + brand constants (scheme-independent) ---- */
:root {
  --ag-serif: "Bitter", Georgia, "Times New Roman", serif;
  --ag-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --ag-hand: "Caveat", "Segoe Script", cursive;
  --ag-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --ag-sticky: #ffd166;
  --ag-card-bg: #2e3440;   /* dark code card, both schemes */
  --ag-card-fg: #cdd6cf;
  --ag-card-dim: #8d9aa8;
}

/* ---- day: "open notebook" ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #2f6f4f;
  --md-primary-fg-color--light: #3c7a5a;
  --md-primary-fg-color--dark: #235539;
  --md-accent-fg-color: #b3902f;
  --md-default-bg-color: #fdf8ef;
  --md-default-fg-color: #23332b;
  --md-default-fg-color--light: #3d4a42;
  --md-default-fg-color--lighter: #6f7a6c;
  --md-default-fg-color--lightest: #eee5d2;
  --md-typeset-color: #3d4a42;
  --md-typeset-a-color: #2f6f4f;
  --md-code-bg-color: #f2ecdc;   /* inline code: red-on-paper manual style */
  --md-code-fg-color: #b3402a;
  --md-typeset-mark-color: rgba(255, 209, 102, 0.35);

  --ag-paper: #fdf8ef;
  --ag-panel: #fffdf6;
  --ag-line: #eee5d2;          /* ruled lines */
  --ag-rule: #e4dcc8;          /* borders */
  --ag-ink: #23332b;
  --ag-ink-soft: #3d4a42;
  --ag-ink-dim: #6f7a6c;
  --ag-green: #2f6f4f;
  --ag-green-deep: #235539;
  --ag-sticky-ink: #b3902f;
  --ag-coral: #c25e4c;
  --ag-card-shadow: #cdbf9d;   /* paper-offset shadow under code cards */
  --ag-soft-shadow: rgba(80, 60, 20, 0.16);
  --ag-sticky-bg: #fff7d6;  --ag-sticky-fg: #5c4a13;  --ag-sticky-title: #8a6d1f;
  --ag-note-bg:   #dff0e6;  --ag-note-fg:   #2f4f3f;  --ag-note-title:   #2f6f4f;
  --ag-warn-bg:   #fde8e4;  --ag-warn-fg:   #6b3328;  --ag-warn-title:   #8c3a2c;
}

/* ---- night: "desk lamp" ---- */
[data-md-color-scheme="slate"] {
  --md-hue: 140deg; /* green-tints all Material hue-derived slate colors (footer, tables, kbd) */
  --md-primary-fg-color: #235539;
  --md-primary-fg-color--light: #2f6f4f;
  --md-primary-fg-color--dark: #1b4029;
  --md-accent-fg-color: #ffd166;
  --md-default-bg-color: #20251f;
  --md-default-fg-color: #e9e6d8;
  --md-default-fg-color--light: #cfccc0;
  --md-default-fg-color--lighter: #8f968a;
  --md-default-fg-color--lightest: #2c322a;
  --md-typeset-color: #cfccc0;
  --md-typeset-a-color: #7fc79e;
  --md-code-bg-color: #2a2f28;
  --md-code-fg-color: #e08a76;
  --md-typeset-mark-color: rgba(255, 209, 102, 0.35);

  --ag-paper: #20251f;
  --ag-panel: #262c24;
  --ag-line: #2c322a;
  --ag-rule: #333a31;
  --ag-ink: #e9e6d8;
  --ag-ink-soft: #cfccc0;
  --ag-ink-dim: #8f968a;
  --ag-green: #7fc79e;
  --ag-green-deep: #5fa97f;
  --ag-sticky-ink: #d4b35a;
  --ag-coral: #e08a76;
  --ag-card-shadow: #121512;
  --ag-soft-shadow: rgba(0, 0, 0, 0.45);
  --ag-sticky-bg: #3a3623;  --ag-sticky-fg: #e8dfae;  --ag-sticky-title: #ffd166;
  --ag-note-bg:   #273a2f;  --ag-note-fg:   #cfe8d8;  --ag-note-title:   #7fc79e;
  --ag-warn-bg:   #3d2a25;  --ag-warn-fg:   #f0cfc5;  --ag-warn-title:   #e08a76;
}

/* ---- base typography ---- */
body,
.md-typeset {
  font-family: var(--ag-sans);
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  font-family: var(--ag-serif);
  color: var(--ag-ink);
}
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--ag-mono);
}

/* ---- code blocks: dark paper-offset cards in BOTH schemes ---- */
.md-typeset pre {
  border-radius: 10px;
  box-shadow: 2px 3px 0 var(--ag-card-shadow);
}
.md-typeset pre > code {
  background: var(--ag-card-bg);
  color: var(--ag-card-fg);
  border-radius: 10px;
}
.md-clipboard {
  color: var(--ag-card-dim);
}
.md-clipboard:hover {
  color: #a3e7c3;
}
/* keep filename bars and line-number gutters on the dark card */
.md-typeset .highlight span.filename {
  background-color: var(--ag-card-bg);
  color: var(--ag-card-fg);
  border-bottom: 1px solid var(--ag-card-dim);
  border-radius: 10px 10px 0 0;
}
.md-typeset .highlight span.filename + pre > code {
  border-radius: 0 0 10px 10px;
}
.md-typeset .highlight [data-linenos]::before {
  background-color: var(--ag-card-bg);
  color: var(--ag-card-dim);
}
.md-typeset .highlighttable .linenos {
  background-color: var(--ag-card-bg);
  color: var(--ag-card-dim);
}
.md-typeset .highlight + .result {
  border-color: var(--ag-card-bg);
}

/* Pygments tokens tuned for the dark card (applies in both schemes) */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-code-hl-color: rgba(255, 209, 102, 0.18);
  --md-code-hl-color--light: rgba(255, 209, 102, 0.12);
  --md-code-hl-keyword-color: #c792ea;
  --md-code-hl-function-color: #82aaff;
  --md-code-hl-string-color: #c3e88d;
  --md-code-hl-number-color: #f78c6c;
  --md-code-hl-constant-color: #f78c6c;
  --md-code-hl-special-color: #f07178;
  --md-code-hl-name-color: #cdd6cf;
  --md-code-hl-operator-color: #89ddff;
  --md-code-hl-punctuation-color: #9bb2a8;
  --md-code-hl-comment-color: var(--ag-card-dim);
  --md-code-hl-variable-color: #cdd6cf;
  --md-code-hl-generic-color: #cdd6cf;
}

/* ===========================================================================
   Header, tabs, sidebar, footer
   =========================================================================== */
.md-header__topic,
.md-header__title {
  font-family: var(--ag-serif);
  font-weight: 700;
}

/* nav tabs: active section = open notebook divider */
.md-tabs {
  background-color: var(--md-primary-fg-color--dark);
}
.md-tabs__link {
  font-family: var(--ag-sans);
  opacity: 0.85;
}
.md-tabs__item {
  padding: 0 0.4rem;
}
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  background: var(--ag-paper);
  color: var(--ag-green);
  font-weight: 700;
  border-radius: 8px 8px 0 0;
  padding: 0 0.6rem 0.69rem;
  opacity: 1;
}

/* sidebar: handwritten section labels, spine-marked active item */
.md-nav__item--section > .md-nav__link {
  font-family: var(--ag-hand);
  font-size: 0.95rem;
  color: var(--ag-sticky-ink);
}
.md-nav__link--active,
.md-nav__link--active code {
  color: var(--ag-green);
  font-weight: 700;
}
.md-sidebar--primary .md-nav__link--active {
  border-left: 3px solid var(--ag-green);
  background: rgba(47, 111, 79, 0.09); /* fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--ag-green) 9%, transparent);
  border-radius: 0 6px 6px 0;
  padding-left: calc(0.8rem - 3px); /* keep text aligned with sibling links */
}

/* footer: "turn the page" prev/next labels */
.md-footer__direction {
  font-family: var(--ag-hand);
  font-size: 0.8rem;
  opacity: 0.9;
}

/* ===========================================================================
   Content: chapter eyebrow, page-header band, admonitions as sticky notes
   =========================================================================== */
.ag-eyebrow-page {
  font-family: var(--ag-hand);
  font-size: 1.15rem;
  color: var(--ag-sticky-ink);
  margin: 0 0 -0.8rem;
}

/* H1 sits on a ruled-paper band */
.md-typeset h1 {
  font-weight: 700;
  background-image: linear-gradient(var(--ag-line) 1px, transparent 1px);
  background-size: 100% 1.7em;
  background-position: 0 0.45em;
  border-bottom: 1px dashed var(--ag-rule);
  padding-bottom: 0.35em;
}

/* admonitions & details → sticky notes */
.md-typeset .admonition,
.md-typeset details {
  border: none;
  border-radius: 2px;
  box-shadow: 2px 4px 8px var(--ag-soft-shadow);
  transform: rotate(-0.4deg);
  background: var(--ag-sticky-bg);
  color: var(--ag-sticky-fg);
}
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background: transparent;
  font-family: var(--ag-hand);
  font-size: 1.05rem;
  color: var(--ag-sticky-title);
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  background-color: var(--ag-sticky-title);
}
/* green family: info / example / success / abstract */
.md-typeset .admonition.info,    .md-typeset details.info,
.md-typeset .admonition.example, .md-typeset details.example,
.md-typeset .admonition.success, .md-typeset details.success,
.md-typeset .admonition.abstract,.md-typeset details.abstract {
  background: var(--ag-note-bg);
  color: var(--ag-note-fg);
}
.md-typeset .admonition.info    > .admonition-title, .md-typeset details.info    > summary,
.md-typeset .admonition.example > .admonition-title, .md-typeset details.example > summary,
.md-typeset .admonition.success > .admonition-title, .md-typeset details.success > summary,
.md-typeset .admonition.abstract> .admonition-title, .md-typeset details.abstract> summary {
  color: var(--ag-note-title);
}
.md-typeset .admonition.info    > .admonition-title::before, .md-typeset details.info    > summary::before,
.md-typeset .admonition.example > .admonition-title::before, .md-typeset details.example > summary::before,
.md-typeset .admonition.success > .admonition-title::before, .md-typeset details.success > summary::before,
.md-typeset .admonition.abstract> .admonition-title::before, .md-typeset details.abstract> summary::before {
  background-color: var(--ag-note-title);
}
/* coral family: warning / danger / failure / bug */
.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.danger,  .md-typeset details.danger,
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.bug,     .md-typeset details.bug {
  background: var(--ag-warn-bg);
  color: var(--ag-warn-fg);
}
.md-typeset .admonition.warning > .admonition-title, .md-typeset details.warning > summary,
.md-typeset .admonition.danger  > .admonition-title, .md-typeset details.danger  > summary,
.md-typeset .admonition.failure > .admonition-title, .md-typeset details.failure > summary,
.md-typeset .admonition.bug     > .admonition-title, .md-typeset details.bug     > summary {
  color: var(--ag-warn-title);
}
.md-typeset .admonition.warning > .admonition-title::before, .md-typeset details.warning > summary::before,
.md-typeset .admonition.danger  > .admonition-title::before, .md-typeset details.danger  > summary::before,
.md-typeset .admonition.failure > .admonition-title::before, .md-typeset details.failure > summary::before,
.md-typeset .admonition.bug     > .admonition-title::before, .md-typeset details.bug     > summary::before {
  background-color: var(--ag-warn-title);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .admonition,
  .md-typeset details {
    transform: none;
  }
}