/* Every colour below is a token from agentry-web/app/globals.css, quoted
   by name; fonts/ and assets/mark.svg sit beside this file because the docs
   image copies docs/ wholesale and nginx serves them at the docs root. */

/* Type: IBM Plex Sans / Plex Mono, the same four woff2 files app/fonts.ts
   loads, served from this origin. Material composes its stacks as
   `--md-text-font-family: var(--md-text-font,_), -apple-system, …`, so
   --md-text-font takes the site's whole stack (globals.css:94-95) and
   Material's own tail sits behind it.

   mkdocs.yml sets `font: false`, so Material emits neither its
   fonts.googleapis.com stylesheet nor the inline <style> that would set
   --md-text-font ahead of the extra_css files. This file is therefore the
   only source of both font variables, and the docs site asks Google Fonts
   for nothing. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-500.woff2") format("woff2");
}

:root {
  /* The site's own stacks, verbatim from globals.css:94-95 with the Next
     font variable replaced by the family name the @font-face blocks declare.
     Material's headings ask for 300 and its <strong> for 700; the variable
     face covers 400-600, so the browser clamps to the ends of that range
     rather than synthesising, which is what the site does too. */
  --md-text-font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-code-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ------------------------------------------------------------------ light

   Material's own light table is `:root,[data-md-color-scheme=default]` and
   Material 9.5.44's base.html puts data-md-color-scheme on <body>, so a
   `:root` block alone is shadowed on <body> by Material's declaration and
   never reaches the page: the grounds would render white in light mode
   while the accent lines, which Material declares only on :root, would
   land. The selector list matches Material's so ours wins on both elements.

   Chrome (--md-primary-*) takes the card fill with an ink foreground, not
   the accent: the site's own header is the paper with ink and muted text and
   a hairline (app/layout.tsx:157-158), and its footer likewise
   (app/layout.tsx:226-229). An accent bar would make the docs read as a
   different product from the site. Taking `surface` rather than `bg` gives
   the bar the card's step off the paper without a rule; in dark that also
   keeps the chrome calm, which a bright viridian header would not. */
:root,
[data-md-color-scheme="default"] {
  /* Paper and ink. */
  --md-default-bg-color: #faf6ee;               /* --color-bg */
  --md-default-fg-color: #231b12;               /* --color-fg */
  --md-default-fg-color--light: #66584a;        /* --color-muted */
  --md-default-fg-color--lighter: #c4b59c;      /* --color-border-strong: blockquote edges, scrollbar thumbs, the ¶ anchor */
  --md-default-fg-color--lightest: #e6dccb;     /* --color-border: hairlines, and the faint grounds under .md-tag and the drawer title */

  /* Header, drawer and (unused here) tabs. */
  --md-primary-fg-color: #f5efe4;               /* --color-surface */
  --md-primary-fg-color--light: #fffdf8;        /* --color-raised */
  --md-primary-fg-color--dark: #e6dccb;         /* --color-border */
  --md-primary-bg-color: #231b12;               /* --color-fg: Material paints the header text with this */
  --md-primary-bg-color--light: #66584a;        /* --color-muted: the search placeholder */

  /* Links: the action colour, hover in the same darker viridian the site's
     buttons and tinted links take. --transparent is the wash Material paints
     behind a hovered search hit; accent-soft IS accent 5% into the paper, so
     the opaque token lands where the alpha mix would. */
  --md-typeset-a-color: #0e7a63;                /* --color-accent */
  --md-accent-fg-color: #0b6350;                /* --color-accent-hover */
  --md-accent-fg-color--transparent: #eef0e7;   /* --color-accent-soft */

  /* The code well, and the ink in it. */
  --md-code-bg-color: #f5efe4;                  /* --color-surface */
  --md-code-fg-color: #231b12;                  /* --color-fg */

  /* Syntax highlighting. Material's light set is tuned to clear 4.5:1 on its
     own #f5f5f5 well (4.52-4.71) and the warmer, darker well drops all six
     below the floor (4.31-4.49), so the well cannot move without these. The
     site's --hl-* set is proven on --color-surface by
     lib/__tests__/contrast.test.ts; the classes each Material variable
     carries are mapped to the token globals.css:565-587 gives them. */
  --md-code-hl-keyword-color: #7c2d92;          /* --hl-keyword */
  --md-code-hl-string-color: #166534;           /* --hl-string */
  --md-code-hl-special-color: #166534;          /* --hl-string: .se .sh .sr .sx are string-family on the site */
  --md-code-hl-number-color: #9f4707;           /* --hl-number */
  --md-code-hl-constant-color: #1e3a8a;         /* --hl-name: .bp .nb */
  --md-code-hl-function-color: #0f766e;         /* --hl-type: .nc .ne .nn */
  --md-code-hl-comment-color: #5f6672;          /* --hl-comment */

  /* Footer. Material's default is an 87%-black bar under cream paper; the
     site's footer is chrome with muted text, so it takes the header's tone
     and the meta strip a step darker. */
  --md-footer-bg-color: #f5efe4;                /* --color-surface */
  --md-footer-bg-color--dark: #e6dccb;          /* --color-border */
  --md-footer-fg-color: #231b12;                /* --color-fg */
  --md-footer-fg-color--light: #66584a;         /* --color-muted */
  --md-footer-fg-color--lighter: #66584a;       /* --color-muted: the copyright line, which Material ships at 45% white */

  /* Tables. Material rules them in 12% black and washes a hovered row in
     3.5% black; both read cool on warm paper. */
  --md-typeset-table-color: #e6dccb;            /* --color-border */
  --md-typeset-table-color--light: #eef0e7;     /* --color-accent-soft, the site's row-hover token */
}

/* ------------------------------------------------------------------- dark

   The same roles, the dark half of every token. Material's slate block is
   also a single attribute selector, so ours wins on document order. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #16110d;               /* --color-bg */
  --md-default-fg-color: #ece4d8;               /* --color-fg */
  --md-default-fg-color--light: #b3a48f;        /* --color-muted */
  --md-default-fg-color--lighter: #4d3f31;      /* --color-border-strong */
  --md-default-fg-color--lightest: #33291f;     /* --color-border */

  --md-primary-fg-color: #201914;               /* --color-surface */
  --md-primary-fg-color--light: #241d17;        /* --color-raised */
  --md-primary-fg-color--dark: #16110d;         /* --color-bg */
  --md-primary-bg-color: #ece4d8;               /* --color-fg */
  --md-primary-bg-color--light: #b3a48f;        /* --color-muted */

  /* Slate makes --md-typeset-a-color follow --md-primary-fg-color, so the
     link colour has to be stated here or it would take the chrome. */
  --md-typeset-a-color: #4fd1b0;                /* --color-accent */
  --md-accent-fg-color: #74dfc4;                /* --color-accent-hover */
  --md-accent-fg-color--transparent: #1c241d;   /* --color-accent-soft */

  --md-code-bg-color: #201914;                  /* --color-surface */
  --md-code-fg-color: #ece4d8;                  /* --color-fg */

  --md-code-hl-keyword-color: #d8b4fe;          /* --hl-keyword */
  --md-code-hl-string-color: #86efac;           /* --hl-string */
  --md-code-hl-special-color: #86efac;          /* --hl-string */
  --md-code-hl-number-color: #fbbf24;           /* --hl-number */
  --md-code-hl-constant-color: #93c5fd;         /* --hl-name */
  --md-code-hl-function-color: #5eead4;         /* --hl-type */
  --md-code-hl-comment-color: #9ca3af;          /* --hl-comment */

  --md-footer-bg-color: #201914;                /* --color-surface */
  --md-footer-bg-color--dark: #16110d;          /* --color-bg */
  --md-footer-fg-color: #ece4d8;                /* --color-fg */
  --md-footer-fg-color--light: #b3a48f;         /* --color-muted */
  --md-footer-fg-color--lighter: #b3a48f;       /* --color-muted */

  --md-typeset-table-color: #33291f;            /* --color-border */
  --md-typeset-table-color--light: #1c241d;     /* --color-accent-soft */
}

/* A repair, not a restyle. From 60em Material paints the header search field
   with a hard-coded 26%-black wash (main.css `.md-search__form`), which
   assumes the saturated header its default palette gives: over the paper
   chrome that wash composites to #b6b1a9 and puts the placeholder at 3.22:1.
   Material's own rule at every other width and in the focused state is
   --md-default-bg-color, so the field takes that at all widths — the field
   is the paper, the bar around it is the card — and the hover lift takes the
   raised fill, which is what Material's #ffffff1f was reaching for. Both
   values are set above, from tokens; no colour is introduced here. */
.md-search__form {
  background-color: var(--md-default-bg-color);
}

.md-search__form:hover {
  background-color: var(--md-primary-fg-color--light);
}

/* Also a repair. Until a scroll gives the header its shadow, the bar is
   separated from the page by the chrome's own step off the paper alone —
   1.06:1 in light, 1.08:1 in dark — so at the top of a page it has no edge.
   The site's header draws a --color-border hairline instead
   (app/layout.tsx:157-158); --md-default-fg-color--lightest is that token in
   both schemes, so the line follows the scheme without a colour of its own. */
.md-header {
  border-bottom: .05rem solid var(--md-default-fg-color--lightest);
}