/* mlxcel - Documentation Styles (brand tokens shared with the landing page) */

/* ==========================================================================
   Brand Design Tokens (matching Next.js landing page)
   ========================================================================== */
:root {
  --brand-cyan: #06b6d4; /* Cyan 500 */
  --brand-purple: #8b5cf6; /* Violet 500 */
  --brand-neon: #00f0ff;
  --bg-void: #020204;
  --bg-panel: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Color Schemes
   ========================================================================== */

/* Light Theme (Default) */
[data-md-color-scheme="default"],
[data-md-color-scheme="lablup"] {
  --md-primary-fg-color: #06b6d4; /* Brand Cyan */
  --md-primary-fg-color--light: #67e8f9; /* Cyan 300 */
  --md-primary-fg-color--dark: #0891b2; /* Cyan 700 */
  --md-accent-fg-color: #8b5cf6; /* Brand Purple */
  /* Keep the accent tint in step with the purple accent (the teal palette
     token would otherwise supply a mismatched teal tint) */
  --md-accent-fg-color--transparent: rgba(139, 92, 246, 0.1);
}

/* Dark Theme (Slate) - "Void" Theme Integration */
[data-md-color-scheme="slate"] {
  /* Backgrounds */
  --md-default-bg-color: #020204; /* bg-void */
  --md-default-bg-color--light: #121217; /* slightly lighter for contrast */

  /* Text */
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #9ca3af; /* muted */
  --md-default-fg-color--lighter: #6b7280;

  /* Primary Colors */
  --md-primary-fg-color: #06b6d4; /* Brand Cyan */
  --md-primary-fg-color--light: #00f0ff; /* Neon Accent */
  --md-primary-fg-color--dark: #0891b2;

  /* Accent */
  --md-accent-fg-color: #8b5cf6; /* Brand Purple */
  --md-accent-fg-color--transparent: rgba(139, 92, 246, 0.1);

  /* Code blocks - Glass effect */
  --md-code-bg-color: rgba(255, 255, 255, 0.05);

  /* Admonitions */
  --md-admonition-bg-color: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Component Styling
   ========================================================================== */

/* Header - Glassmorphism.
   The header, tab strip, and footer are painted void-black in BOTH color
   schemes, so their text and icons must be set to light colors explicitly.
   Zensical's modern variant (unlike classic Material) derives chrome text
   from the default foreground, which is near-black in the light scheme;
   without these rules the header renders black-on-black (issue behind
   PR #4225). */
.md-header {
  background-color: rgba(2, 2, 4, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.md-header__title,
.md-header__button,
.md-header__source .md-source {
  color: inherit;
}

/* Tab strip lives on the dark header surface in both schemes */
.md-tabs {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
}

.md-tabs__link {
  color: rgba(255, 255, 255, 0.7);
}

.md-tabs__link:hover,
.md-tabs__link:focus {
  color: #ffffff;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  color: var(--brand-neon);
}

/* Footer - "Void" style.
   The footer is dark in both schemes, so the default-foreground variables
   are redefined on this surface: the modern variant colors footer links via
   a high-specificity rule reading --md-default-fg-color, which is
   near-black in the light scheme. */
.md-footer,
.md-footer-meta {
  --md-default-fg-color: rgba(255, 255, 255, 0.92);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.7);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.45);
}

.md-footer {
  background-color: var(--bg-void);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.md-footer__link {
  color: inherit;
}

.md-footer-meta {
  background-color: var(--bg-void);
}

.md-copyright {
  color: rgba(255, 255, 255, 0.45);
}

.md-copyright__highlight,
.md-copyright a {
  color: rgba(255, 255, 255, 0.7);
}

.md-social__link {
  color: rgba(255, 255, 255, 0.7);
}

.md-social__link:hover,
.md-social__link:focus {
  color: #ffffff;
}

/* Code block styling */
.md-typeset code {
  border-radius: 4px;
  font-family: var(--md-code-font-family);
}

.md-typeset pre code {
  font-size: 0.85em;
}

/* Table improvements */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.md-typeset table:not([class]) th {
  background-color: rgba(6, 182, 212, 0.1); /* Cyan tint */
  color: var(--md-default-fg-color);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Admonition styling - Modern & Glassy */
.md-typeset .admonition {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.md-typeset .admonition-title {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Navigation improvements */
.md-nav__link {
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: var(--brand-cyan);
  font-weight: 600;
}

/* Search Highlight */
[data-md-color-scheme="slate"] .md-search-result__article mark {
  background-color: rgba(6, 182, 212, 0.3); /* Cyan highlight */
  color: white;
}

/* Mermaid diagram improvements */
.mermaid {
  text-align: center;
  margin: 1rem 0;
  background: white; /* Mermaid usually needs light bg or specific theme config */
  padding: 1rem;
  border-radius: 8px;
}

[data-md-color-scheme="slate"] .mermaid {
  background: rgba(255, 255, 255, 0.05);
  /* Note: Mermaid dark theme requires JS config, CSS alone might not be enough for content */
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
  .md-nav__link {
    padding: 0.6rem 0.8rem;
  }
}