/* ==========================================================================
   Musingly Documentation — Design System
   Matches the Musingly marketing site visual identity
   ========================================================================== */

/* --------------------------------------------------------------------------
   Switzer — Musingly's primary typeface (via Fontshare)
   -------------------------------------------------------------------------- */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap');

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --m-font:      'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --m-font-mono: 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Hero gradient — exact colors from <Gradient> component */
  --m-gradient-hero:   linear-gradient(115deg, #e8f4fd 0%, #92c5f8 70%, #ffd670 100%);

  /* Nav gradient — deep indigo → blue → violet, white text readable */
  --m-gradient-nav:    linear-gradient(115deg, #312e81 0%, #1e3a8a 40%, #4c1d95 100%);

  /* Accent strip — all six topic chip colors from homepage */
  --m-gradient-accent: linear-gradient(90deg,
    #6366f1 0%,
    #0891b2 25%,
    #7c3aed 50%,
    #059669 75%,
    #e11d48 100%
  );
}

/* --------------------------------------------------------------------------
   Light Mode — white / gray-50 surfaces, gray-950 text, indigo-500 primary
   -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:             #6366f1;
  --md-primary-fg-color--light:      #818cf8;
  --md-primary-fg-color--dark:       #4f46e5;
  --md-primary-bg-color:             #ffffff;
  --md-primary-bg-color--light:      rgba(255, 255, 255, 0.8);

  --md-accent-fg-color:              #6366f1;
  --md-accent-fg-color--transparent: rgba(99, 102, 241, 0.1);
  --md-accent-bg-color:              #f9fafb;

  --md-default-bg-color:             #ffffff;
  --md-default-bg-color--light:      #f9fafb;
  --md-default-bg-color--lighter:    #f3f4f6;
  --md-default-bg-color--lightest:   #e5e7eb;

  --md-default-fg-color:             #030712;
  --md-default-fg-color--light:      rgba(3, 7, 18, 0.72);
  --md-default-fg-color--lighter:    rgba(3, 7, 18, 0.48);
  --md-default-fg-color--lightest:   rgba(3, 7, 18, 0.28);

  --md-typeset-a-color:              #4f46e5;

  --md-code-bg-color:                #f9fafb;
  --md-code-fg-color:                #030712;

  --md-footer-bg-color:              #030712;
  --md-footer-bg-color--dark:        #000000;
  --md-footer-fg-color:              rgba(249, 250, 251, 0.72);
  --md-footer-fg-color--light:       rgba(249, 250, 251, 0.48);
  --md-footer-fg-color--lighter:     rgba(249, 250, 251, 0.28);

  --md-shadow-z1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --md-shadow-z2: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --md-shadow-z3: 0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   Dark Mode — gray-950 base, indigo-400 primary
   -------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:             #818cf8;
  --md-primary-fg-color--light:      #a5b4fc;
  --md-primary-fg-color--dark:       #6366f1;
  --md-primary-bg-color:             #030712;
  --md-primary-bg-color--light:      rgba(3, 7, 18, 0.8);

  --md-accent-fg-color:              #818cf8;
  --md-accent-fg-color--transparent: rgba(129, 140, 248, 0.15);
  --md-accent-bg-color:              #111827;

  --md-default-bg-color:             #030712;
  --md-default-bg-color--light:      #111827;
  --md-default-bg-color--lighter:    #1f2937;
  --md-default-bg-color--lightest:   #374151;

  --md-default-fg-color:             #f9fafb;
  --md-default-fg-color--light:      rgba(249, 250, 251, 0.72);
  --md-default-fg-color--lighter:    rgba(249, 250, 251, 0.48);
  --md-default-fg-color--lightest:   rgba(249, 250, 251, 0.28);

  --md-typeset-a-color:              #818cf8;

  --md-code-bg-color:                #111827;
  --md-code-fg-color:                #f9fafb;

  --md-footer-bg-color:              #000000;
  --md-footer-bg-color--dark:        #000000;
  --md-footer-fg-color:              rgba(249, 250, 251, 0.56);
  --md-footer-fg-color--light:       rgba(249, 250, 251, 0.36);
  --md-footer-fg-color--lighter:     rgba(249, 250, 251, 0.20);

  --md-shadow-z1: 0 1px 3px rgba(0, 0, 0, 0.4),  0 1px 2px rgba(0, 0, 0, 0.3);
  --md-shadow-z2: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --md-shadow-z3: 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Typography — Switzer with Musingly's weight & tracking scale
   -------------------------------------------------------------------------- */
body,
.md-typeset {
  font-family: var(--m-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--m-font) !important;
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.md-typeset code,
.md-typeset pre {
  font-family: var(--m-font-mono) !important;
}

.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.md-typeset a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Logo — Musingly orbital mark SVG
   currentColor inherits header text color automatically
   -------------------------------------------------------------------------- */
.md-header__button.md-logo {
  color: #030712;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo {
  color: #f9fafb;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* --------------------------------------------------------------------------
   Header — bg-white/80 + backdrop-blur-md + border-black/5
   Exact match to marcom <Navbar> component styling
   -------------------------------------------------------------------------- */
.md-header {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  color: #030712 !important;
  position: relative;
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(3, 7, 18, 0.8) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #f9fafb !important;
}

/* Topic-chip accent strip at very top of page */
.md-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--m-gradient-accent);
  z-index: 10;
}

.md-header__title {
  font-family: var(--m-font) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #030712;
}

[data-md-color-scheme="slate"] .md-header__title {
  color: #f9fafb;
}

/* --------------------------------------------------------------------------
   Navigation Tabs — deep indigo/blue/violet gradient
   -------------------------------------------------------------------------- */
.md-tabs {
  background: var(--m-gradient-nav) !important;
}

.md-tabs__link {
  font-family: var(--m-font) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72) !important;
  opacity: 1;
}

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

.md-tabs__link--active {
  color: #ffffff !important;
  font-weight: 600;
}

/* Golden-yellow indicator — matches hero gradient end color */
.md-tabs__indicator {
  background-color: #ffd670;
  height: 2px;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.md-nav__title {
  font-family: var(--m-font) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-nav__link--active {
  color: var(--md-primary-fg-color) !important;
  font-weight: 600;
}

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

/* --------------------------------------------------------------------------
   Search — rounded-full pill
   -------------------------------------------------------------------------- */
.md-search__input {
  border-radius: 980px;
  background-color: rgba(3, 7, 18, 0.06);
}

[data-md-color-scheme="slate"] .md-search__input {
  background-color: rgba(249, 250, 251, 0.08);
}

/* --------------------------------------------------------------------------
   Buttons — rounded-full, matches marcom <Button> variants
   -------------------------------------------------------------------------- */
.md-button {
  border-radius: 980px;
  font-family: var(--m-font) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.5em 1.5em;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.md-button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Primary — bg-gray-950 text-white (marcom default button) */
.md-button--primary {
  background: #030712 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-button--primary {
  background: #f9fafb !important;
  color: #030712 !important;
}

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

.md-typeset pre {
  border-radius: 12px;
  box-shadow: var(--md-shadow-z1);
}

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

/* --------------------------------------------------------------------------
   Tables — rounded card
   -------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--md-shadow-z1);
  border: none;
}

.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color--light);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Admonitions — borderless card
   -------------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border: none;
  box-shadow: var(--md-shadow-z1);
}

.md-typeset .admonition-title,
.md-typeset summary {
  border-radius: 12px 12px 0 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Tags — indigo pill, matches topic chip style from homepage
   -------------------------------------------------------------------------- */
.md-tag {
  border-radius: 980px;
  font-family: var(--m-font) !important;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2em 0.8em;
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

[data-md-color-scheme="slate"] .md-tag {
  background: rgba(129, 140, 248, 0.12);
  color: #818cf8;
  border-color: rgba(129, 140, 248, 0.24);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.md-footer        { background: var(--md-footer-bg-color); }
.md-footer-meta   { background: var(--md-footer-bg-color--dark); }

/* --------------------------------------------------------------------------
   Scrollbar — indigo-tinted minimal
   -------------------------------------------------------------------------- */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  background: rgba(99, 102, 241, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.45);
}