/* TeamTBM Custom Colors - Light Mode */
[data-md-color-scheme="default"] {
  /* Primary colors */
  --md-primary-fg-color: #558ed5;
  --md-primary-fg-color--light: #55a6d5;
  --md-primary-fg-color--dark: #556fd5;
  --md-accent-fg-color: #558ed5;
  --md-typeset-a-color: #558ed5;

  /* Code block colors */
  --md-code-bg-color: #f5f5f5;
  --md-code-fg-color: #37474f;
}

/* TeamTBM Custom Colors - Dark Mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #558ed5;
  --md-primary-fg-color--light: #55a6d5;
  --md-primary-fg-color--dark: #556fd5;
  --md-accent-fg-color: #55a6d5;
  --md-typeset-a-color: #55a6d5;
}

/* Custom elements using your theme colors */
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

.md-header {
  background-color: var(--md-primary-fg-color);
}

/* Force code block styling in light mode */
[data-md-color-scheme="default"] .highlight,
[data-md-color-scheme="default"] pre,
[data-md-color-scheme="default"] code {
  background-color: #e5e5e5 !important;
}

[data-md-color-scheme="default"] .highlight code {
  background-color: inherit!important;
}

/* Fix copy code button hover states */
.md-clipboard {
  color: rgba(255, 255, 255, 0.7) !important;
}

.md-clipboard:hover,
.md-clipboard:focus {
  color: var(--md-accent-fg-color) !important;
}

/* Make icon brighter by default in dark mode too */
[data-md-color-scheme="slate"] .md-clipboard {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-md-color-scheme="slate"] .md-clipboard:hover,
[data-md-color-scheme="slate"] .md-clipboard:focus {
  color: var(--md-accent-fg-color) !important;
}

/* Bold and bright headings - Light Mode */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
  font-weight: 700 !important;
  color: #2c3e50 !important;
}

/* Bold and bright headings - Dark Mode */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  font-weight: 700 !important;
  color: #ffffff !important;
}