/* VFEEG-inspired palette for mkdocs-material.
 *
 * Mirrors the member-onboarding app's color scheme defined in
 * src/app/globals.css (HSL → hex). Two schemes:
 *   - light: cream background, dark teal text, mint accent
 *   - dark:  dark teal background, cream text, mint accent (matches the app)
 *
 * Activated via mkdocs.yml palette → primary: custom + accent: custom.
 */

:root,
[data-md-color-scheme="default"] {
  /* Header bar uses the app's exact `--background` HSL (not a hex
   * approximation — that drifted blue-grey). The app's color is teal
   * with a hint of green, hue 176. */
  --md-primary-fg-color:        hsl(176, 26%, 14%);   /* app --background */
  --md-primary-fg-color--light: hsl(176, 26%, 20%);   /* app --card */
  --md-primary-fg-color--dark:  hsl(176, 26%, 10%);
  --md-primary-bg-color:        hsl(48, 60%, 95%);    /* app --foreground (cream) */
  --md-primary-bg-color--light: hsl(48, 60%, 95%);

  --md-accent-fg-color:         #1c8a6f;   /* darker mint for AA contrast on cream */
  --md-accent-fg-color--transparent: rgba(28, 138, 111, 0.1);
  --md-accent-bg-color:         #fbf6e2;
  --md-accent-bg-color--light:  #fbf6e2;

  --md-typeset-a-color:         #1c8a6f;

  /* Code blocks in light mode — Material's default is washed-out
   * (light text on light grey). Force high contrast: near-black text
   * on a slightly tinted background so ASCII-art diagrams stay legible. */
  --md-code-bg-color:           #f2efe1;   /* warm cream, slightly darker than page */
  --md-code-fg-color:           #142a2c;   /* near-black teal */
}

[data-md-color-scheme="slate"] {
  --md-hue: 176;
  --md-default-bg-color:        hsl(176, 26%, 14%);   /* app --background */
  --md-default-bg-color--light: hsl(176, 26%, 18%);
  --md-default-bg-color--lighter: hsl(176, 26%, 22%);
  --md-default-bg-color--lightest: hsl(176, 26%, 26%);

  --md-default-fg-color:        hsl(48, 60%, 95%);    /* app --foreground (cream) */
  --md-default-fg-color--light: hsl(48, 60%, 85%);
  --md-default-fg-color--lighter: hsl(48, 60%, 70%);
  --md-default-fg-color--lightest: hsl(48, 60%, 50%);

  --md-primary-fg-color:        hsl(183, 100%, 13%);  /* app --sidebar-background */
  --md-primary-fg-color--light: hsl(183, 100%, 18%);
  --md-primary-fg-color--dark:  hsl(183, 100%, 9%);
  --md-primary-bg-color:        hsl(48, 60%, 95%);
  --md-primary-bg-color--light: hsl(48, 60%, 95%);

  --md-accent-fg-color:         hsl(157, 94%, 74%);   /* app --primary (mint) */
  --md-accent-fg-color--transparent: hsla(157, 94%, 74%, 0.1);
  --md-accent-bg-color:         hsl(183, 100%, 13%);
  --md-accent-bg-color--light:  hsl(183, 100%, 13%);

  --md-typeset-a-color:         hsl(157, 94%, 74%);

  /* Code blocks: slightly lighter than the page bg for contrast */
  --md-code-bg-color:           hsl(176, 26%, 10%);
  --md-code-fg-color:           hsl(48, 60%, 90%);

  /* Tables zebra-stripe with a subtle teal tint */
  --md-typeset-table-color:     hsla(157, 94%, 74%, 0.05);
  --md-typeset-table-color--light: hsla(157, 94%, 74%, 0.1);

  /* Admonitions (info/warning/tip boxes) — keep them readable on dark bg */
  --md-admonition-bg-color:     hsl(176, 26%, 18%);
  --md-admonition-fg-color:     hsl(48, 60%, 95%);
}

/* Headline accent — mint underline for h2, matches the app's button-style */
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom: 1px solid hsla(157, 94%, 74%, 0.25);
  padding-bottom: 0.25em;
}
[data-md-color-scheme="default"] .md-typeset h2 {
  border-bottom: 1px solid rgba(28, 138, 111, 0.25);
  padding-bottom: 0.25em;
}

/* Tab underline (selected tab in the top nav) */
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: hsl(157, 94%, 74%);
}

/* Mermaid diagrams: Material's default leaves them small in a wide
 * container — the SVG keeps its intrinsic ratio so unused vertical space
 * means small node text. Force a wider/taller render and let the SVG
 * scale up. */
.md-typeset .mermaid {
  text-align: center;
  margin: 1.5em 0;
}
.md-typeset .mermaid svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  min-height: 350px;     /* upscale even when the diagram is short */
}