/* ServiceHop Documentation Theme
 * Aligned with DESIGN.md guidelines
 */

/* Light mode (default) */
:root,
[data-md-color-scheme="default"] {
  /* Primary brand color from DESIGN.md */
  --md-primary-fg-color: #5790F7;
  --md-primary-fg-color--light: #7EC5FB;
  --md-primary-fg-color--dark: #223B86;
  --md-accent-fg-color: #5790F7;

  /* Grayscale tokens from DESIGN.md */
  --sh-gray-900: #1E1E1E;
  --sh-gray-700: #4A4A4A;
  --sh-gray-500: #6B7280;
  --sh-gray-300: #D1D5DB;
  --sh-gray-100: #F3F4F6;
}

/* Dark mode (slate) */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #5790F7;
  --md-primary-fg-color--light: #7EC5FB;
  --md-primary-fg-color--dark: #223B86;
  --md-accent-fg-color: #5790F7;

  /* Inverted grayscale for dark mode */
  --sh-gray-900: #F3F4F6;
  --sh-gray-700: #D1D5DB;
  --sh-gray-500: #9CA3AF;
  --sh-gray-300: #4A4A4A;
  --sh-gray-100: #1E1E1E;

  /* Dark mode backgrounds */
  --md-default-bg-color: #1E1E1E;
  --md-default-fg-color: #F3F4F6;
}

/* Typography - grayscale-first approach */
.md-typeset {
  color: var(--sh-gray-900);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--sh-gray-900);
  font-weight: 600;
}

/* Links use primary blue */
.md-typeset a {
  color: var(--md-primary-fg-color);
}

.md-typeset a:hover {
  color: var(--md-primary-fg-color--dark);
}

/* Code blocks styling */
.md-typeset code {
  background-color: var(--sh-gray-100);
  color: var(--sh-gray-900);
  border-radius: 4px;
}

[data-md-color-scheme="default"] .md-typeset pre > code {
  background-color: #F3F4F6;
  color: #1E1E1E;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: #2D2D2D;
  color: #F8F8F2;
}

/* Navigation styling */
.md-nav__link {
  color: var(--sh-gray-700);
}

.md-nav__link:hover {
  color: var(--md-primary-fg-color);
}

.md-nav__link--active,
.md-nav__link[aria-current="page"] {
  color: var(--md-primary-fg-color) !important;
  font-weight: 600;
}

/* Navigation section headers - more prominent */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--sh-gray-500);
}

/* Hide site name in sidebar navigation */
.md-nav--primary > .md-nav__title {
  display: none;
}

/* Header styling - Light mode */
.md-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: none !important;
}

/* Logo sizing */
.md-header__button.md-logo img {
  height: 2.5rem;
  width: auto;
}

[data-md-color-scheme="default"] .md-header__title {
  color: #1E1E1E;
}

[data-md-color-scheme="default"] .md-header__button {
  color: #4A4A4A;
}

[data-md-color-scheme="default"] .md-header__button:hover {
  color: #5790F7;
}

/* Header styling - Dark mode */
[data-md-color-scheme="slate"] .md-header {
  background-color: #27272A !important;
  border-bottom: 1px solid #3F3F46;
}

/* Admonition styling */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
}

/* Table styling */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background-color: #F3F4F6;
  color: #1E1E1E;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #2D2D2D;
  color: #F3F4F6;
  font-weight: 600;
}

/* Footer styling */
[data-md-color-scheme="default"] .md-footer {
  background-color: #1E1E1E;
}

[data-md-color-scheme="slate"] .md-footer {
  background-color: #151515;
}

/* Search styling */
.md-search__form {
  border-radius: 4px !important;
}

/* Search - Light mode */
[data-md-color-scheme="default"] .md-search__form {
  background-color: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}

[data-md-color-scheme="default"] .md-search__input {
  color: #1E1E1E;
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: #6B7280;
}

[data-md-color-scheme="default"] .md-search__icon {
  color: #6B7280;
}

/* Tab styling */
.md-typeset .tabbed-labels > label {
  color: var(--sh-gray-700);
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--md-primary-fg-color);
}

.md-typeset .tabbed-labels > .tabbed-label--active {
  color: var(--md-primary-fg-color);
}