/* Forest & Brass — the marketing site's palette, applied to the docs so
   kitchencnc.com and kitchencnc.com/docs/ read as one site.

   Every token below is copied verbatim from render-gtm/app/globals.css. If the
   site's palette changes, change it there first, then mirror it here — these are
   a copy, not a source. Material's own `primary: green` / `accent: amber` in
   mkdocs.yml stay as the selector hooks; the values are overridden here. */

:root {
  --kcnc-forest: #14271d; /* --walnut: deep forest, dark sections */
  --kcnc-forest-deep: #0a1c12; /* --header-bg, opaque: the nav bar */
  --kcnc-forest-teal: #3e6b54; /* --blueprint: annotations, links on light */
  --kcnc-brass: #c9a45c; /* --gold: accents, CTAs */
  --kcnc-brass-dark: #7d6222; /* brass darkened for cream: #c9a45c on cream is
                                 ~2:1, unreadable. This is 5.1:1. */
  --kcnc-cream: #f3efe6; /* --warm-white: page background */
  --kcnc-cream-card: #eae4d6; /* --brown-card: code blocks, tables */
  --kcnc-ink: #1c2a22; /* --brown-text: body text on cream */
  --kcnc-ink-muted: #54625a; /* --text-muted */
  --kcnc-sage: #9db0a2; /* --muted: secondary text on dark */
}

/* ── Header, nav, and the tab strip ───────────────────────────────────────
   Deep forest in both schemes, matching the site's fixed nav. The site's nav is
   dark over a cream page, so this deliberately does NOT follow the scheme. */
[data-md-color-primary="green"] {
  --md-primary-fg-color: var(--kcnc-forest-deep);
  --md-primary-fg-color--light: var(--kcnc-forest-teal);
  --md-primary-fg-color--dark: #061410;
  --md-primary-bg-color: var(--kcnc-cream);
  --md-primary-bg-color--light: var(--kcnc-sage);
}

/* ── Accent: hover, focus, active nav, search highlight ── */
[data-md-color-accent="amber"] {
  --md-accent-fg-color: var(--kcnc-brass);
  --md-accent-fg-color--transparent: rgba(201, 164, 92, 0.1);
  --md-accent-bg-color: var(--kcnc-forest);
  --md-accent-bg-color--light: var(--kcnc-forest-teal);
}

/* ── Light scheme: cream page, forest ink ── */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--kcnc-cream);
  --md-default-bg-color--light: rgba(243, 239, 230, 0.7);
  --md-default-bg-color--lighter: rgba(243, 239, 230, 0.3);
  --md-default-bg-color--lightest: rgba(243, 239, 230, 0.12);
  --md-default-fg-color: var(--kcnc-ink);
  --md-default-fg-color--light: var(--kcnc-ink-muted);
  --md-default-fg-color--lighter: rgba(28, 42, 34, 0.32);
  --md-default-fg-color--lightest: rgba(28, 42, 34, 0.07);

  --md-typeset-color: var(--kcnc-ink);
  --md-typeset-a-color: var(--kcnc-forest-teal);
  --md-typeset-mark-color: rgba(201, 164, 92, 0.35);

  --md-code-bg-color: var(--kcnc-cream-card);
  --md-code-fg-color: var(--kcnc-ink);
  --md-code-hl-comment-color: var(--kcnc-ink-muted);
  --md-code-hl-string-color: #3e6b54;
  --md-code-hl-keyword-color: #7a5c1f;
  --md-code-hl-number-color: #8a4b2a;

  --md-footer-bg-color: var(--kcnc-forest-deep);
  --md-footer-bg-color--dark: #061410;
  --md-footer-fg-color: var(--kcnc-cream);
  --md-footer-fg-color--light: var(--kcnc-sage);
  --md-footer-fg-color--lighter: rgba(157, 176, 162, 0.6);
}

/* ── Dark scheme: forest page, cream text, brass links ──
   --md-hue swings Material's computed slate greys off blue and onto green, so
   the surfaces Material derives itself (admonitions, table stripes, the search
   overlay) land in the same family as the values set explicitly below. */
[data-md-color-scheme="slate"] {
  --md-hue: 152;

  --md-default-bg-color: var(--kcnc-forest);
  --md-default-bg-color--light: rgba(20, 39, 29, 0.7);
  --md-default-bg-color--lighter: rgba(20, 39, 29, 0.3);
  --md-default-bg-color--lightest: rgba(20, 39, 29, 0.12);
  --md-default-fg-color: var(--kcnc-cream);
  --md-default-fg-color--light: var(--kcnc-sage);
  --md-default-fg-color--lighter: rgba(157, 176, 162, 0.45);
  --md-default-fg-color--lightest: rgba(157, 176, 162, 0.12);

  --md-typeset-color: var(--kcnc-cream);
  --md-typeset-a-color: var(--kcnc-brass);
  --md-typeset-mark-color: rgba(201, 164, 92, 0.28);

  --md-code-bg-color: #0f1f16;
  --md-code-fg-color: var(--kcnc-cream);
  --md-code-hl-comment-color: var(--kcnc-sage);
  --md-code-hl-string-color: #9dc2aa;
  --md-code-hl-keyword-color: var(--kcnc-brass);
  --md-code-hl-number-color: #e0a878;

  --md-footer-bg-color: var(--kcnc-forest-deep);
  --md-footer-bg-color--dark: #061410;
}

/* Dark-mode link color needs the COMPOUND selector, not the scheme block above.
   Material ships `[data-md-color-scheme=slate][data-md-color-primary=green]
   { --md-typeset-a-color: #71c174 }` — two attribute selectors, so it outranks a
   plain `[data-md-color-scheme=slate]` no matter how late this file loads. Match
   its specificity or dark-mode links stay Material green. */
[data-md-color-scheme="slate"][data-md-color-primary="green"] {
  --md-typeset-a-color: var(--kcnc-brass);
}

/* On cream, the accent (link hover, focus, active nav) needs the darkened brass
   — full brass reads as ~2:1 against #f3efe6. Dark mode keeps full brass, where
   it sits at ~7:1 on forest. Compound selector so scheme beats the plain
   `[data-md-color-accent=amber]` block regardless of order. */
[data-md-color-scheme="default"][data-md-color-accent="amber"] {
  --md-accent-fg-color: var(--kcnc-brass-dark);
  --md-accent-fg-color--transparent: rgba(125, 98, 34, 0.1);
}

/* ── Details Material derives from greys and would otherwise miss ── */

/* Headings pick up the ink/cream default, but h1 is grey-600 by default. */
.md-typeset h1,
.md-typeset h2 {
  color: var(--md-default-fg-color);
}

/* Brass rule under the page title, echoing the site's section dividers. */
.md-typeset h1 {
  border-bottom: 1px solid rgba(201, 164, 92, 0.35);
  padding-bottom: 0.3em;
}

/* Blockquotes: brass edge instead of Material's grey. */
.md-typeset blockquote {
  border-left-color: var(--kcnc-brass);
  color: var(--md-default-fg-color--light);
}

/* Sidebar active item — brass, matching the site's active-nav treatment. */
.md-nav__link--active,
.md-nav__link--active code {
  color: var(--kcnc-brass);
}

/* Search field on the dark header. */
.md-search__form {
  background-color: rgba(243, 239, 230, 0.12);
}
.md-search__form:hover {
  background-color: rgba(201, 164, 92, 0.22);
}

/* Table headers on brass-tinted forest so tables don't read as stock Material. */
.md-typeset table:not([class]) th {
  background-color: var(--kcnc-forest-deep);
  color: var(--kcnc-cream);
}

/* The scheme toggle and header icons read cream on forest. */
.md-header__button {
  color: var(--kcnc-cream);
}