/* CANOE docs — custom palette matching the logo (navy + burnt orange),
   with a sustainability-green accent for highlights/success states.
   These build ON TOP OF Material's built-in "default" (light) and
   "slate" (dark) schemes — via primary: custom / accent: custom in
   mkdocs.yml — so all of Material's base background/text variables
   (--md-default-bg-color, etc.) still come from those schemes. We only
   override primary/accent here. */

[data-md-color-scheme="default"] {
  --md-primary-fg-color:             #1B2A4A;   /* deep navy — header, nav */
  --md-primary-fg-color--light:      #2E4270;
  --md-primary-fg-color--dark:       #101A30;
  --md-primary-bg-color:             #FFFFFF;

  --md-accent-fg-color:              #E2572B;   /* burnt orange — buttons, hover states */
  --md-accent-fg-color--transparent: #E2572B1a;
  --md-accent-bg-color:              #FFFFFF;

  /* body-text links: darker than accent orange for AA contrast on white */
  --md-typeset-a-color:              #C8461B;

  /* sustainability green, used for admonitions / success callouts */
  --md-typeset-mark-color:           #2E7D5B33;
  --canoe-green:                    #2E7D5B;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:             #101A30;
  --md-primary-fg-color--light:      #1B2A4A;
  --md-primary-fg-color--dark:       #0A1220;
  --md-primary-bg-color:             #E7E9EE;

  --md-accent-fg-color:              #F07A4E;   /* slightly brighter orange for dark bg contrast */
  --md-accent-fg-color--transparent: #F07A4E1a;
  --md-accent-bg-color:              #101A30;

  /* body-text links: same bright orange reads fine against the dark background */
  --md-typeset-a-color:              #F07A4E;

  --canoe-green:                    #4CA37B;
}

/* Underline links on hover/focus (not by default) so they're identifiable
   by shape, not color alone — helps on top of the color-contrast fix above. */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.15s;
}
.md-typeset a:hover,
.md-typeset a:focus {
  text-decoration-color: currentColor;
}

/* Buttons (.md-button) pick up accent color automatically, but give the
   primary button a solid navy fill so it reads as the "main" action. */
.md-button--primary {
  background-color: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: #fff;
}
.md-button--primary:hover {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* Outlined (non-primary) buttons default to --md-primary-fg-color for both
   text and border. In dark mode that's a near-black navy, which is nearly
   invisible against the dark background — swap to the brighter accent
   orange instead so they stay legible. */
[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}
[data-md-color-scheme="slate"] .md-button:not(.md-button--primary):hover {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-primary-fg-color);
}

/* Center Mermaid diagrams on the page */
.md-typeset .mermaid {
  text-align: center;
}
.md-typeset .mermaid svg {
  margin: 0 auto;
}

/* Success-style admonitions lean on the green rather than Material's default teal */
.md-typeset .admonition.success,
.md-typeset .admonition.tip {
  border-color: var(--canoe-green);
}
.md-typeset .success > .admonition-title,
.md-typeset .tip > .admonition-title {
  background-color: color-mix(in srgb, var(--canoe-green) 15%, transparent);
}
.md-typeset .success > .admonition-title::before,
.md-typeset .tip > .admonition-title::before {
  background-color: var(--canoe-green);
}