/*  * Canonical green: #419d3a.
 * Interactive hover/focus states use the darker #347d2e, never Material's
 * default blue/indigo accent. Mermaid has its own neutral variables in
 * mermaid-viewer.css and is intentionally isolated from these brand colors.
 */
:root,
[data-md-color-scheme="default"] {
  --opt-brand: #419d3a;
  --opt-brand-dark: #347d2e;
  --opt-brand-light: #68b961;
  --opt-on-brand: #ffffff;
  --opt-focus-ring: rgba(52, 125, 46, .28);

  --md-primary-fg-color: var(--opt-brand);
  --md-primary-fg-color--light: var(--opt-brand-light);
  --md-primary-fg-color--dark: var(--opt-brand-dark);
  --md-primary-bg-color: var(--opt-on-brand);
  --md-primary-bg-color--light: rgba(255, 255, 255, .74);

  /* Material uses accent for hovered links, controls and scrollbars. */
  --md-accent-fg-color: var(--opt-brand-dark);
  --md-accent-fg-color--transparent: rgba(52, 125, 46, .12);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, .74);
  --md-typeset-a-color: var(--opt-brand-dark);
}

[data-md-color-scheme="slate"] {
  --opt-brand: #419d3a;
  --opt-brand-dark: #347d2e;
  --opt-brand-light: #77c970;
  --opt-on-brand: #ffffff;
  --opt-focus-ring: rgba(119, 201, 112, .30);

  --md-primary-fg-color: var(--opt-brand);
  --md-primary-fg-color--light: var(--opt-brand-light);
  --md-primary-fg-color--dark: var(--opt-brand-dark);
  --md-primary-bg-color: var(--opt-on-brand);
  --md-primary-bg-color--light: rgba(255, 255, 255, .76);

  --md-accent-fg-color: var(--opt-brand-light);
  --md-accent-fg-color--transparent: rgba(119, 201, 112, .14);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, .76);
  --md-typeset-a-color: var(--opt-brand-light);
}

/* Header and tabs: green surface always carries white foreground. */
.md-header,
.md-tabs {
  color: #fff;
}

.md-header__title,
.md-header__button,
.md-header__button.md-logo,
.md-tabs__link {
  color: #fff;
}

.md-header svg,
.md-tabs svg {
  fill: currentColor;
}

.md-tabs__link:hover,
.md-tabs__link:focus-visible,
.md-tabs__link--active {
  color: #fff;
  opacity: 1;
}

/* Text links and navigation: no blue/indigo interaction states. */
.md-typeset a:not(.md-button):hover,
.md-typeset a:not(.md-button):focus-visible,
.md-nav__link:hover,
.md-nav__link:focus-visible,
.md-nav__link--active,
.md-nav__item .md-nav__link--active,
.md-search-result__link:hover,
.md-search-result__link:focus-visible,
.md-typeset .headerlink:hover,
.md-typeset .headerlink:focus-visible {
  color: var(--opt-brand-dark);
}

/* Primary and secondary Material buttons share the green interaction model. */
.md-typeset .md-button--primary {
  background-color: var(--opt-brand);
  border-color: var(--opt-brand);
  color: #fff;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus-visible,
.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):focus-visible {
  background-color: var(--opt-brand-dark);
  border-color: var(--opt-brand-dark);
  color: #fff;
}

.md-typeset .md-button:not(.md-button--primary) {
  border-color: var(--opt-brand);
  color: var(--opt-brand-dark);
}

/* Icon controls inherit the accent but keep a visible keyboard focus ring. */
.md-header__button:focus-visible,
.md-search__input:focus,
.md-typeset a:focus-visible,
.md-typeset button:focus-visible,
.opt-mermaid-tool:focus-visible {
  outline: 2px solid var(--opt-brand-dark);
  outline-offset: 2px;
}

/* Home/module cards stay neutral until hover, then use the brand dark green. */
a.opt-item:hover,
a.opt-item:focus-visible {
  border-color: var(--opt-brand-dark);
  color: var(--md-default-fg-color);
}

a.opt-item:hover .opt-item__num,
a.opt-item:focus-visible .opt-item__num {
  color: var(--opt-brand-dark);
}

::selection {
  background: color-mix(in srgb, var(--opt-brand) 28%, transparent);
}