:root {
  --md-primary-fg-color: #10B981;                 /* Emerald */
  --md-primary-fg-color--light: #34D399;          /* Mint light */
  --md-primary-fg-color--dark: #059669;           /* Emerald dark */
  --md-accent-fg-color: #10B981;
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.1);
}

/* Dark (slate) mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #10B981;
  --md-primary-fg-color--light: #34D399;
  --md-primary-fg-color--dark: #059669;
  --md-accent-fg-color: #10B981;
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.1);
}

/* Logo styling */
.md-logo img {
  filter: invert(0);       /* Normal in light mode */
}

[data-md-color-scheme="slate"] .md-logo img {
  filter: invert(1);       /* Visible on dark background */
}

/* Custom link colors */
a {
  color: #10B981;          /* Primary emerald */
}

a:hover {
  color: #059669;          /* Darker emerald */
}

/* Navigation tabs bar */
.md-tabs {
  background-color: #111827;   /* Modern dark gray instead of pure black */
}

/* Navbar link styling */
.md-tabs__link {
  color: #D1D5DB;              /* Light gray for default state */
  transition: color 0.2s ease;
}

.md-tabs__link:hover {
  color: #FFFFFF;              /* Pure white on hover */
}

.md-tabs__link--active {
  color: #FFFFFF;              /* Active tab is white */
}

/* Header navigation links */
.md-header__button {
  color: #D1D5DB;
}

.md-header__button:hover {
  color: #FFFFFF;
}

/* Code block background */
.highlight {
  background-color: #F3F4F6;        /* Light neutral gray */
}

[data-md-color-scheme="slate"] .highlight {
  background-color: #1F2937;        /* Dark neutral gray */
}