/* Easy Menus Help — cream + forest restyle of mkdocs-material.
   Overrides Material's CSS custom properties so the entire site
   (header, nav, links, code blocks, tables, admonitions) adopts the
   brand palette without us touching theme templates.

   Brand reference: admin_system tailwind.config.js + the Cream + Forest
   Green design system. Keep these two in sync if either side moves. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

/* ── Light scheme ──────────────────────────────────────────────── */
[data-md-color-scheme='default'] {
  /* Brand: forest green primary, ink-dark text, cream background */
  --md-primary-fg-color:        #2f5d3a;   /* forest */
  --md-primary-fg-color--light: #e4ece2;   /* forest-soft */
  --md-primary-fg-color--dark:  #1f4128;   /* forest-deep */
  --md-primary-bg-color:        #fbf8f0;   /* cream-50 (text on primary) */
  --md-primary-bg-color--light: #fbf8f0;

  --md-accent-fg-color:         #2f5d3a;
  --md-accent-fg-color--transparent: rgba(47, 93, 58, 0.10);
  --md-accent-bg-color:         #fbf8f0;
  --md-accent-bg-color--light:  #fbf8f0;

  --md-default-bg-color:        #fbf8f0;   /* cream-50 page background */
  --md-default-fg-color:        #1a2620;   /* ink */
  --md-default-fg-color--light: #6b7770;   /* ink-muted */
  --md-default-fg-color--lighter: rgba(26, 38, 32, 0.32);
  --md-default-fg-color--lightest: rgba(26, 38, 32, 0.07);

  --md-typeset-color:           #1a2620;
  --md-typeset-a-color:         #2f5d3a;
  --md-typeset-mark-color:      #e4ece2;

  --md-code-bg-color:           #f6f1e4;   /* cream */
  --md-code-fg-color:           #1a2620;

  --md-footer-bg-color:         #1f2a24;   /* sidebar-dark */
  --md-footer-bg-color--dark:   #1a2620;
}

/* ── Dark scheme — the brand reads great in light mode so keep dark
   close to the ink/forest tones rather than going pure black. ── */
[data-md-color-scheme='slate'] {
  --md-primary-fg-color:        #4a8155;   /* forest, brightened for dark */
  --md-primary-fg-color--light: #2a3830;
  --md-primary-fg-color--dark:  #1f4128;
  --md-primary-bg-color:        #fbf8f0;

  --md-accent-fg-color:         #6fa97c;
  --md-accent-fg-color--transparent: rgba(74, 129, 85, 0.15);

  --md-default-bg-color:        #1a2620;
  --md-typeset-a-color:         #6fa97c;
}

/* ── Typography — Fraunces for display, Inter for body, both via
     Google Fonts. mkdocs-material loads Inter automatically via
     theme.font.text; Fraunces we import above. ───────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.md-typeset h1 { font-weight: 600; }

/* Header brand alignment — keep the logo lockup at readable size */
.md-header__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
}

/* Soften the primary buttons to match brand pill style */
.md-typeset .md-button--primary {
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background: var(--md-primary-fg-color--dark);
  border-color: var(--md-primary-fg-color--dark);
}

/* Admonitions — re-tint with brand colors instead of Material defaults */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #2f5d3a;
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(47, 93, 58, 0.08);
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #b8553a;
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(184, 85, 58, 0.08);
}

/* Make code blocks read as a cream chip, not Material's default gray */
.md-typeset pre > code,
.md-typeset .highlight pre {
  background-color: #f6f1e4;
  color: #1a2620;
}

/* Tables — match brand line color. The explicit `color` on th is
   essential: Material's default sets th text to var(--md-primary-bg-color),
   which we've redefined as cream (for "text on primary-green
   surfaces"). Without this override, cream text lands on the cream
   th background = invisible header row. */
.md-typeset table:not([class]) {
  border-color: rgba(26, 38, 32, 0.12);
}
.md-typeset table:not([class]) th {
  background-color: #f6f1e4;
  color: #1a2620;          /* ink — readable on cream */
  font-weight: 600;
}