/* Seer Interactive Brand Theme for MkDocs Material */

:root {
  /* Primary Colors */
  --seer-pink: #FC0A5E;
  --seer-orange: #FF9033;
  --seer-purple-deep: #343456;
  --seer-purple-electric: #5050BC;
  
  /* Secondary Colors */
  --seer-cyan: #54DEDB;
  --seer-purple-bright: #BA38FF;
  
  /* Neutrals */
  --seer-black: #000000;
  --seer-white: #FFFFFF;
  --seer-gray-100: #E9E9EF;
  --seer-gray-300: #ADADBC;
  --seer-gray-500: #707089;
  
  /* Gradients */
  --gradient-title: linear-gradient(135deg, #FC0A5E 0%, #FF9033 100%);
  --gradient-card: linear-gradient(135deg, #343456 0%, #5050BC 100%);
  --gradient-accent: linear-gradient(135deg, #FC0A5E 0%, #BA38FF 100%);
}

/* Dark mode (slate scheme) overrides */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--seer-pink);
  --md-primary-fg-color--light: #fd3d7a;
  --md-primary-fg-color--dark: #d10850;
  
  --md-accent-fg-color: var(--seer-orange);
  --md-accent-fg-color--transparent: rgba(255, 144, 51, 0.1);
  
  --md-default-bg-color: #0d0d0d;
  --md-default-bg-color--light: #1a1a2e;
  --md-default-bg-color--lighter: var(--seer-purple-deep);
  --md-default-bg-color--lightest: #404070;
  
  --md-code-bg-color: #1a1a2e;
  --md-code-fg-color: var(--seer-gray-100);
  
  --md-typeset-color: var(--seer-white);
  --md-typeset-a-color: var(--seer-orange);
}

/* Light mode overrides */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--seer-pink);
  --md-accent-fg-color: var(--seer-orange);
}

/* Typography - Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap');

body,
.md-typeset {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

code, pre, .md-typeset code {
  font-family: 'Source Code Pro', 'Consolas', monospace;
}

/* Hero/title styling */
.md-typeset h1 {
  font-weight: 700;
}

.md-typeset h2 {
  font-weight: 600;
}

/* Accent links */
.md-typeset a {
  color: var(--seer-orange);
}

.md-typeset a:hover {
  color: var(--seer-pink);
}

/* Navigation */
.md-nav__link--active {
  color: var(--seer-pink) !important;
}

.md-nav__link:hover {
  color: var(--seer-orange);
}

/* Header/tabs */
.md-header {
  background-color: var(--seer-purple-deep);
}

.md-tabs {
  background-color: var(--seer-purple-deep);
}

.md-tabs__link--active {
  color: var(--seer-pink);
}

/* Admonitions with Seer colors */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--seer-cyan);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(84, 222, 219, 0.1);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--seer-orange);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(255, 144, 51, 0.1);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--seer-pink);
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(252, 10, 94, 0.1);
}

/* Success admonition */
.md-typeset .admonition.success,
.md-typeset details.success {
  border-color: var(--seer-cyan);
}

.md-typeset .success > .admonition-title,
.md-typeset .success > summary {
  background-color: rgba(84, 222, 219, 0.1);
  color: var(--seer-cyan);
}

/* Info admonition */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--seer-purple-electric);
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(80, 80, 188, 0.1);
}

/* Code blocks */
.md-typeset pre > code {
  background: linear-gradient(135deg, #1a1a2e 0%, #252540 100%);
}

/* Tables */
.md-typeset table:not([class]) th {
  background-color: var(--seer-purple-deep);
  color: var(--seer-white);
}

/* Buttons */
.md-typeset .md-button {
  background-color: var(--seer-pink);
  border-color: var(--seer-pink);
  color: var(--seer-white);
}

.md-typeset .md-button:hover {
  background-color: var(--seer-orange);
  border-color: var(--seer-orange);
}

.md-typeset .md-button--primary {
  background-color: var(--seer-pink);
  border-color: var(--seer-pink);
}

/* Search */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.1);
}

.md-search__highlight {
  background-color: rgba(255, 144, 51, 0.3);
}

/* Footer */
.md-footer {
  background-color: var(--seer-purple-deep);
}

.md-footer-meta {
  background-color: #1a1a2e;
}

/* Sidebar */
.md-sidebar--primary {
  background-color: #0d0d0d;
}

/* Content area */
.md-content {
  background-color: #0d0d0d;
}

/* Scrollbar (for webkit browsers) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--seer-black);
}

::-webkit-scrollbar-thumb {
  background: var(--seer-purple-deep);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--seer-purple-electric);
}

/* Selection highlight */
::selection {
  background-color: rgba(252, 10, 94, 0.3);
  color: var(--seer-white);
}

/* Task lists */
.md-typeset .task-list-indicator::before {
  background-color: var(--seer-pink);
}

/* Tags */
.md-tag {
  background-color: var(--seer-purple-deep);
  color: var(--seer-white);
}

.md-tag:hover {
  background-color: var(--seer-purple-electric);
}

/* ============================================
   UX/UI AUDIT FIXES - January 2026
   ============================================ */

/* 1. CRITICAL: FAQ/Question admonitions - use brand purple instead of green */
.md-typeset details.question,
.md-typeset .admonition.question {
  border-color: var(--seer-purple-electric);
}

.md-typeset .question > summary,
.md-typeset .question > .admonition-title {
  background-color: rgba(80, 80, 188, 0.15);
}

.md-typeset details.question[open] > summary {
  background-color: rgba(80, 80, 188, 0.25);
}

/* Question icon color */
.md-typeset .question > summary::before,
.md-typeset .question > .admonition-title::before {
  background-color: var(--seer-purple-electric);
}

/* 2. HIGH: Homepage hero title gradient */
.md-content article > h1:first-of-type {
  background: var(--gradient-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 3. HIGH: Table styling improvements */
.md-typeset table:not([class]) {
  border: 1px solid rgba(80, 80, 188, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  border-bottom: 2px solid var(--seer-pink);
}

.md-typeset table:not([class]) tr:hover td {
  background-color: rgba(80, 80, 188, 0.1);
}

/* 4. MEDIUM: Sidebar active link consistency */
.md-nav--primary .md-nav__link--active,
.md-sidebar .md-nav__link--active {
  color: var(--seer-pink) !important;
  font-weight: 600;
}

/* 5. MEDIUM: Code copy button visibility */
.md-typeset .highlight button.md-clipboard {
  color: var(--seer-gray-500);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.md-typeset .highlight:hover button.md-clipboard {
  opacity: 1;
  color: var(--seer-cyan);
}

.md-typeset .highlight button.md-clipboard:hover {
  color: var(--seer-pink);
}

/* 6. MEDIUM: Back to top button */
.md-top {
  background-color: var(--seer-pink);
  color: var(--seer-white);
  border: none;
}

.md-top:hover {
  background-color: var(--seer-orange);
}

/* 7. LOW: Inline code distinction */
.md-typeset code:not([class*="language-"]):not(.doc-symbol):not(.md-ellipsis) {
  background-color: rgba(80, 80, 188, 0.15);
  border: 1px solid rgba(80, 80, 188, 0.25);
  padding: 0.1em 0.4em;
}