/**
 * PlexusOne Design System - MkDocs Material Theme
 * Version: 1.0.0
 *
 * CDN: https://plexusone.dev/css/plexusone-mkdocs.css
 *
 * Usage in mkdocs.yml:
 *   extra_css:
 *     - https://plexusone.dev/css/plexusone-mkdocs.css
 *
 * Note: Navigation styles are handled by plexus-nav.js
 */

/* ============================================
   Color Palette Variables
   ============================================ */
:root {
  /* Primary dark background for all surfaces */
  --plexus-background: #0a0e1a;
  /* Elevated surfaces like cards and modals */
  --plexus-background-elevated: #0f172a;
  /* Subtle background differentiation, code blocks */
  --plexus-background-subtle: #1e293b;
  /* Primary text color on dark backgrounds */
  --plexus-foreground: #f1f5f9;
  /* Secondary text, descriptions, metadata */
  --plexus-foreground-muted: #94a3b8;
  /* Primary brand color - links, CTAs, highlights */
  --plexus-cyan: #06b6d4;
  /* Hover states, emphasis */
  --plexus-cyan-light: #22d3ee;
  /* Active states, borders */
  --plexus-cyan-dark: #0891b2;
  /* Secondary accent - focus rings, secondary highlights */
  --plexus-purple: #8b5cf6;
  /* Hover states for secondary elements */
  --plexus-purple-light: #a78bfa;
  /* Active states for secondary elements */
  --plexus-purple-dark: #7c3aed;
  /* Tertiary accent - decorative gradients, special highlights */
  --plexus-pink: #ec4899;
  /* Lighter accent variant */
  --plexus-pink-light: #f472b6;
  /* Darker accent variant */
  --plexus-pink-dark: #db2777;
  /* Gradient midpoint between purple and pink */
  --plexus-violet: #a855f7;
  /* Success states, positive indicators */
  --plexus-success: #10b981;
  /* Warning states, caution indicators */
  --plexus-warning: #f59e0b;
  /* Error states, destructive actions */
  --plexus-error: #ef4444;
  /* Default border color for cards and dividers */
  --plexus-border: #334155;
  /* Subtle borders, separators */
  --plexus-border-subtle: #1e293b;
}

/* ============================================
   MkDocs Material - Dark Mode (Slate)
   ============================================ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #06b6d4;
  --md-primary-fg-color--light: #22d3ee;
  --md-primary-fg-color--dark: #0891b2;
  /* Note: --md-primary-bg-color is used for header TEXT color, not background */
  /* It must be light to contrast against the primary-fg-color header background */
  --md-primary-bg-color: #f1f5f9;
  --md-primary-bg-color--light: #94a3b8;

  --md-accent-fg-color: #8b5cf6;
  --md-accent-fg-color--transparent: #8b5cf61a;
  --md-accent-bg-color: #8b5cf6;
  --md-accent-bg-color--light: #a78bfa;

  --md-default-fg-color: #f1f5f9;
  --md-default-fg-color--light: #94a3b8;
  --md-default-fg-color--lighter: #f1f5f99e;
  --md-default-fg-color--lightest: #f1f5f952;
  --md-default-bg-color: #0a0e1a;
  --md-default-bg-color--light: #0f172a;
  --md-default-bg-color--lighter: #1e293b;
  --md-default-bg-color--lightest: #1e293b;

  --md-code-fg-color: #22d3ee;
  --md-code-bg-color: #1e293b;
  --md-code-hl-color: #06b6d426;
  --md-code-hl-keyword-color: #8b5cf6;
  --md-code-hl-function-color: #06b6d4;
  --md-code-hl-string-color: #10b981;

  --md-typeset-color: #f1f5f9;
  --md-typeset-a-color: #06b6d4;

  --md-footer-fg-color: #f1f5f9;
  --md-footer-fg-color--light: #94a3b8;
  --md-footer-bg-color: #0f172a;
  --md-footer-bg-color--dark: #0a0e1a;

  --md-admonition-fg-color: #f1f5f9;
  --md-admonition-bg-color: #0f172a;
  --md-typeset-table-color: #334155;
}

/* ============================================
   MkDocs Material - Light Mode
   ============================================ */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0891b2;
  --md-primary-fg-color--light: #06b6d4;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #f8fafc;

  --md-accent-fg-color: #8b5cf6;
  --md-accent-fg-color--transparent: #8b5cf61a;

  --md-code-fg-color: #0891b2;
  --md-code-bg-color: #f1f5f9;
  --md-typeset-a-color: #0891b2;
}

/* ============================================
   Typography
   ============================================ */
:root {
  --md-text-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --md-code-font: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* ============================================
   Custom MkDocs Material Styles
   ============================================ */

/* Header styling */
[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(135deg, #0a0e1a 0%, #0f172a 100%);
  border-bottom: 1px solid #1e293b;
}

/* Navigation hover */
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #06b6d4;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #06b6d4;
  font-weight: 500;
}

/* Code blocks */
.md-typeset code {
  border-radius: 4px;
  padding: 0.1em 0.3em;
}

.md-typeset pre > code {
  border-radius: 8px;
}

/* Tables */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #1e293b;
  border-bottom: 1px solid #334155;
}

/* Admonitions */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border-radius: 8px;
  border: 1px solid #1e293b;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.info {
  border-left-color: #06b6d4;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.tip {
  border-left-color: #8b5cf6;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning {
  border-left-color: #f59e0b;
}

/* Search - Dark Mode */
@media screen {
  [data-md-color-scheme="slate"] .md-search__form {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
  }

  [data-md-color-scheme="slate"] .md-search__input {
    background-color: transparent !important;
    color: #f1f5f9 !important;
    caret-color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
  }

  [data-md-color-scheme="slate"] .md-search__input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
  }

  [data-md-color-scheme="slate"] .md-search__icon {
    color: #94a3b8 !important;
  }

  [data-md-color-scheme="slate"] .md-search__icon svg {
    fill: #94a3b8 !important;
  }

  [data-md-color-scheme="slate"] .md-search__icon:hover {
    color: #f1f5f9 !important;
  }

  [data-md-color-scheme="slate"] .md-search__icon:hover svg {
    fill: #f1f5f9 !important;
  }
}

/* Search results - Dark Mode */
@media screen {
  [data-md-color-scheme="slate"] .md-search__output {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
  }

  [data-md-color-scheme="slate"] .md-search-result__link {
    color: #f1f5f9 !important;
  }

  [data-md-color-scheme="slate"] .md-search-result__link:hover {
    background-color: #1e293b !important;
  }

  [data-md-color-scheme="slate"] .md-search-result__article {
    background-color: transparent !important;
  }

  [data-md-color-scheme="slate"] .md-search-result__title {
    color: #f1f5f9 !important;
  }

  [data-md-color-scheme="slate"] .md-search-result__teaser {
    color: #94a3b8 !important;
  }
}

/* Search - Light Mode */
@media screen {
  [data-md-color-scheme="default"] .md-search__form {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
  }

  [data-md-color-scheme="default"] .md-search__input {
    background-color: transparent !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
  }

  [data-md-color-scheme="default"] .md-search__input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
  }

  [data-md-color-scheme="default"] .md-search__icon {
    color: #64748b !important;
  }

  [data-md-color-scheme="default"] .md-search__icon svg {
    fill: #64748b !important;
  }

  [data-md-color-scheme="default"] .md-search__icon:hover {
    color: #1e293b !important;
  }

  [data-md-color-scheme="default"] .md-search__icon:hover svg {
    fill: #1e293b !important;
  }
}

/* Tabs */
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label:hover {
  color: #06b6d4;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > .tabbed-label--active {
  color: #06b6d4;
}

/* Links */
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #22d3ee;
}

/* ============================================
   PlexusOne Navigation Positioning
   (Required when using plexus-nav.js)
   ============================================ */

/* Adjust MkDocs header position below PlexusOne nav */
.md-header {
  top: 64px;
}

/* Adjust main content to account for both navbars */
.md-container {
  padding-top: 64px;
}

/* Adjust search modal position */
.md-search__overlay {
  top: 64px;
}

/* Adjust sidebar positions */
.md-sidebar--primary {
  top: 140px;
}

.md-sidebar--secondary {
  top: 140px;
}