:root {
  /* core brand */
  --brand-primary:       #298062;
  --brand-primary-light: #3AB289;
  --brand-primary-dark:  #194D3B;
  --brand-accent:        #00B7FF;

  /* light surfaces & text */
  --surface-bg-light:    #F8FAF9;
  --surface-muted-light: #F0F2F1;
  --text-main-light:     #212121;
  --text-dim-light:      #6E6E6E;
  --border-light:        #E4E5E5;

  /* dark surfaces & text */
  --surface-bg-dark:     #121412;
  --surface-muted-dark:  #1a1c1a;
  --text-main-dark:      #FAFAFA;
  --text-dim-dark:       #AAAAAA;
  --border-dark:         #2a2d2a;
}

[data-md-color-scheme="default"] {
  /* brand */
  --md-primary-fg-color:            var(--brand-primary-dark);
  --md-primary-fg-color--light:     var(--brand-primary-light);
  --md-primary-fg-color--dark:      var(--brand-primary-dark);
  --md-accent-fg-color:             var(--brand-accent);

  /* page + text */
  --md-default-bg-color:            var(--surface-bg-light);
  --md-default-fg-color:            var(--text-main-light);
  --md-default-fg-color--light:     var(--text-dim-light);
  --md-code-bg-color:               var(--surface-muted-light);
  --md-border-color:                var(--border-light);
  --md-typeset-a-color:             var(--brand-primary);

  /* cues */
  --md-tabs-active-underline-color: var(--brand-primary-dark);

  /* footer */
  --md-footer-bg-color:             var(--brand-primary-dark);
  --md-footer-fg-color:             #ffffff;
  --md-footer-bg-color--dark:       var(--brand-primary-dark);
}

[data-md-color-scheme="slate"] {
  /* brand */
  --md-primary-fg-color:            var(--brand-primary-dark);
  --md-primary-fg-color--light:     color-mix(in srgb, var(--brand-primary-light) 80%, white);
  --md-primary-fg-color--dark:      color-mix(in srgb, var(--brand-primary-dark) 80%, black);
  --md-accent-fg-color:             var(--brand-accent);

  /* page + text */
  --md-default-fg-color:            var(--text-main-dark);
  --md-default-fg-color--light:     var(--text-dim-dark);
  --md-code-bg-color:               var(--surface-muted-dark);
  --md-border-color:                var(--border-dark);
  --md-typeset-a-color:             var(--brand-primary-light);

  /* cues */
  --md-tabs-active-underline-color: var(--brand-primary-dark);

  /* footer */
  --md-footer-bg-color:             var(--brand-primary-dark);
  --md-footer-fg-color:             #ffffff;
  --md-footer-bg-color--dark:       var(--brand-primary-dark);
}