// OptiFlowX — Dark-tech / Neon AI SCSS theme for MkDocs Material
// Implements the design rules provided by the user (dark gradient, neon accents,
// headings, code block styling, nav and TOC styling, buttons/chips, etc.).

// ---------------------------
// Palette (SCSS variables)
// ---------------------------
// Primary palette (defined as SCSS variables to allow color math)
$ofx-accent-cyan:   #00eaff; // main accent
$ofx-accent-violet: #9b4dff; // secondary accent
$ofx-accent-green:  #4affc0; // success / strings
$ofx-accent-pink:   #ff2ec6; // warnings / special
$ofx-accent-gold:   #ffb347; // numbers / highlights

$ofx-bg-1:          #0a0f1a;
$ofx-bg-2:          #05080f;
$sidebar-bg:        #0c131f;
$card-glass:        rgba(255,255,255,0.03);
$glass-border:      rgba(255,255,255,0.05);
$muted-comment:     #6b7280;
$text-high:         #d0d0e0;

// Global transitions
$fast: 150ms;
$mid: 220ms;

// ---------------------------
// Export CSS variables at runtime (final theme export)
// Use interpolation so values are computed by SCSS first.
// ---------------------------
:root {
  --ofx-accent-cyan:   #{$ofx-accent-cyan};
  --ofx-accent-violet: #{$ofx-accent-violet};
  --ofx-accent-green:  #{$ofx-accent-green};
  --ofx-accent-pink:   #{$ofx-accent-pink};
  --ofx-accent-gold:   #{$ofx-accent-gold};
  --ofx-bg-1:          #{$ofx-bg-1};
  --ofx-bg-2:          #{$ofx-bg-2};
  --ofx-sidebar-bg:    #{$sidebar-bg};
  --ofx-card:          #{$card-glass};
  --ofx-glass-border:  #{$glass-border};
  --ofx-text:          #{$text-high};
  --ofx-comment:       #{$muted-comment};
  /* precompute a useful mix for runtime use if needed */
  --ofx-accent-mix:    #{mix($ofx-accent-cyan, $ofx-accent-violet, 40%)};
}

// ---------------------------
// Page base
// ---------------------------
body {
  background: linear-gradient(180deg, $ofx-bg-1, $ofx-bg-2);
  color: $text-high;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background $mid ease, color $mid ease;
}

// Use subtle separators between major sections
.md-typeset > * + * {
  border-top: 1px solid rgba(255,255,255,0.02);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

// Neon separators (small) between sections
.ofx-neon-sep {
  height: 2px;
  background: linear-gradient(90deg, $ofx-accent-cyan, $ofx-accent-violet);
  opacity: 0.08;
  margin: 1.25rem 0;
}

// ---------------------------
// Headings & Titles
// ---------------------------
h1.md-typeset__title, h1 {
  color: $ofx-accent-violet;
  text-shadow: 0 4px 28px rgba($ofx-accent-violet,0.14);
  transition: color $fast ease, text-shadow $mid ease;
}

h2, .md-typeset h2 {
  position: relative;
  color: $text-high;
}
h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 0.45rem;
  background: linear-gradient(90deg, $ofx-accent-cyan, rgba(0,0,0,0));
  border-radius: 6px;
  opacity: 0.95;
}

h3, h4, h5 {
  color: mix($ofx-accent-cyan, $ofx-accent-violet, 40%);
  transition: color $fast ease, text-shadow $fast ease;
}
h3:hover, h4:hover, h5:hover {
  text-shadow: 0 6px 18px rgba($ofx-accent-cyan,0.06), 0 6px 24px rgba($ofx-accent-violet,0.04);
}

// Small neon underline for section headings
.md-typeset h2 + .ofx-neon-sep, .md-typeset h3 + .ofx-neon-sep { margin-top: 0.6rem }

// ---------------------------
// Cards / Panels (glass) — depth and soft shadows
// ---------------------------
.md-card, .md-content, .md-page {
  background: $card-glass;
  border-radius: 12px;
  border: 1px solid $glass-border;
  box-shadow: 0 8px 28px rgba(2,6,23,0.6), 0 2px 12px rgba(0,0,0,0.5);
  transition: transform $mid ease, box-shadow $mid ease, border-color $mid ease;
}
.md-card:hover, .md-content:hover { transform: translateY(-6px); box-shadow: 0 18px 60px rgba(0,0,0,0.6) }

// ---------------------------
// Navigation sidebar
// ---------------------------
.md-nav__primary {
  background: $sidebar-bg;
  border-right: 1px solid rgba(255,255,255,0.02);
}
.md-nav__item.md-nav__link--active, .md-nav__link--active {
  color: $ofx-accent-cyan !important;
  box-shadow: inset 4px 0 14px rgba($ofx-accent-cyan,0.08);
  border-left: 3px solid rgba($ofx-accent-cyan,0.14);
}
.md-nav__link:hover { color: $ofx-accent-violet; text-shadow: 0 2px 12px rgba($ofx-accent-violet,0.06) }
.md-nav__title { color: $ofx-accent-violet; border-bottom: 1px solid rgba($ofx-accent-violet,0.04); }

// Right-hand TOC panel
.md-nav--secondary, .md-nav--toc {
  background: $sidebar-bg;
}
.md-nav--toc .md-nav__link--active { border-left: 3px solid $ofx-accent-cyan; padding-left: 0.6rem }

// ---------------------------
// Buttons, chips, badges
// ---------------------------
.md-button--primary, .md-btn, .md-button {
  background: linear-gradient(90deg, $ofx-accent-cyan, mix($ofx-accent-cyan, #ffffff, 12%));
  color: #041017;
  box-shadow: 0 8px 30px rgba($ofx-accent-cyan,0.06);
  transition: transform $fast ease, box-shadow $fast ease, filter $fast ease;
}
.md-button--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba($ofx-accent-cyan,0.1) }
.badge, .md-chip { background: $ofx-accent-violet; color: white }

// Secondary (violet)
.md-button--secondary { background: linear-gradient(90deg, $ofx-accent-violet, darken($ofx-accent-violet, 6%)); color: #fff }

// ---------------------------
// Inline code
// ---------------------------
code, .md-inline-code {
  background: #141c2b;
  border: 1px solid $ofx-accent-cyan;
  color: $ofx-accent-cyan;
  padding: 0.08rem 0.32rem;
  border-radius: 8px;
}

// ---------------------------
// Code blocks (Prism/Highlight)
// ---------------------------
.md-typeset pre, pre[class*="language-"] {
  background: rgba(14,20,31,0.8); /* glass-like */
  color: #e6eef6;
  border-radius: 12px;
  padding: 1rem;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 10px 36px rgba(0,0,0,0.7), 0 2px 14px rgba($ofx-accent-cyan,0.03);
  transition: box-shadow $fast ease, transform $fast ease;
}
.md-typeset pre:hover { box-shadow: 0 18px 60px rgba(0,0,0,0.75), 0 6px 28px rgba($ofx-accent-cyan,0.06) }

/* Prism token colors per rule */
.token.string { color: $ofx-accent-green; }
.token.attr-value { color: $ofx-accent-green; }
.token.number { color: $ofx-accent-gold; }
.token.boolean { color: $ofx-accent-gold; }
.token.keyword { color: $ofx-accent-cyan; font-weight: 600 }
.token.operator { color: $ofx-accent-cyan }
.token.function { color: $ofx-accent-violet }
.token.class-name { color: $ofx-accent-violet }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: $muted-comment; font-style: italic }

/* subtle glow around code blocks */
.md-typeset pre::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: 0 6px 40px rgba($ofx-accent-cyan,0.02) inset;
}

// ---------------------------
// Links and emphasized text
// ---------------------------
a, a code { color: $ofx-accent-cyan; text-decoration: none }
a:hover { color: $ofx-accent-violet; text-shadow: 0 6px 28px rgba($ofx-accent-violet,0.04) }

em { color: $ofx-accent-gold; font-style: normal; font-weight: 600 }

// ---------------------------
// Lists — clearer differentiation
// ---------------------------
ul li::marker { color: $ofx-accent-cyan }
ol li::marker { color: $ofx-accent-gold }

// ---------------------------
// Header animated gradient bar (subtle)
// ---------------------------
.md-header {
  position: relative;
  overflow: visible;
}
.md-header::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, $ofx-accent-cyan, $ofx-accent-violet, $ofx-accent-gold);
  opacity: 0.06;
  animation: ofx-header-shift 10s linear infinite;
}
@keyframes ofx-header-shift { 0% { background-position: 0% } 100% { background-position: 200% } }

// ---------------------------
// Misc utilities
// ---------------------------
.ofx-glow { box-shadow: 0 8px 40px rgba($ofx-accent-cyan,0.06) }
.ofx-pill { padding: 0.25rem 0.6rem; border-radius: 999px }

/* Ensure contrasts for accessibility: strong headings / links */
.md-typeset h1, .md-typeset h2, .md-typeset h3 { color: $text-high }
