/* ==========================================================================
   MindSight -- Gaze Vector theme
   Single source of truth for all custom docs styling.
   Palette (from the logo): teal #4ECDC4, blue #5B8DEF, violet #9B6DFF,
   dark purple #1E1428 -> #110B1A, magenta #9B3A7E, light #E0E0E6.
   Readability first: body text + content areas stay near-stock Material
   contrast. The brand lives in the header, accents, links, hero, and
   admonition/code tinting -- not in wholesale recoloring.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand palette tokens (shared)
   -------------------------------------------------------------------------- */
:root {
  --ms-teal:        #4ECDC4;
  --ms-blue:        #5B8DEF;
  --ms-blue-light:  #7FA5F5;
  --ms-violet:      #9B6DFF;
  --ms-magenta:     #9B3A7E;
  --ms-deep-purple: #2A1D3A;
  --ms-dark-purple: #1E1428;
  --ms-darkest:     #110B1A;
  --ms-light:       #E0E0E6;
}

/* --------------------------------------------------------------------------
   2. Light scheme (default) -- deep-purple header, teal accent, blue links
   -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  /* Primary drives the header + tabs bar */
  --md-primary-fg-color:        #2A1D3A;
  --md-primary-fg-color--light: #3A2A50;
  --md-primary-fg-color--dark:  #1E1428;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  /* Accent = teal (hover states, active nav, focus) */
  --md-accent-fg-color:         #4ECDC4;
  --md-accent-fg-color--transparent: rgba(78, 205, 196, 0.1);

  /* Links = brand blue; keep body text near-stock */
  --md-typeset-a-color:         #5B8DEF;
}

/* --------------------------------------------------------------------------
   3. Dark scheme (slate) -- brand-tinted surfaces, lighter blue links
   -------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  /* Header stays deep brand purple */
  --md-primary-fg-color:        #1E1428;
  --md-primary-fg-color--light: #2A1D3A;
  --md-primary-fg-color--dark:  #110B1A;
  --md-primary-bg-color:        #E0E0E6;
  --md-primary-bg-color--light: rgba(224, 224, 230, 0.7);

  /* Accent = teal */
  --md-accent-fg-color:         #4ECDC4;
  --md-accent-fg-color--transparent: rgba(78, 205, 196, 0.15);

  /* Links = lighter blue for contrast on dark */
  --md-typeset-a-color:         #7FA5F5;

  /* Brand-tinted backgrounds -- warm purple family, NOT pure #110B1A,
     to preserve body-text contrast. */
  --md-default-bg-color:        #17111F;
  --md-default-bg-color--light: rgba(224, 224, 230, 0.7);
  --md-default-fg-color:        rgba(224, 224, 230, 0.87);
  --md-default-fg-color--light: rgba(224, 224, 230, 0.54);
  --md-default-fg-color--lighter: rgba(224, 224, 230, 0.32);
  --md-default-fg-color--lightest: rgba(224, 224, 230, 0.12);

  /* Slightly lifted surfaces for code blocks + cards */
  --md-code-bg-color:           #1F1730;
  --md-code-fg-color:           #E0E0E6;

  /* Footer picks up the darker brand tone */
  --md-footer-bg-color:         #110B1A;
  --md-footer-bg-color--dark:   #0C0812;
}

/* Subtle admonition tint on slate (kept gentle -- readability first) */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border-left-color: var(--ms-teal);
  background-color: #1C1528;
}

/* --------------------------------------------------------------------------
   4. Links -- teal on hover in both schemes
   -------------------------------------------------------------------------- */
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--ms-teal);
}

/* --------------------------------------------------------------------------
   5. Landing hero (.ms-hero) -- centered logo, tagline, gradient CTA
   -------------------------------------------------------------------------- */
.ms-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  margin-bottom: 1.5rem;
}

/* Full logo lockup ships with a baked dark-purple background, so we render
   it as a rounded card -- deliberate in light mode, blends into the dark
   surface in slate. */
.ms-hero img {
  max-width: 420px;
  width: 78%;
  height: auto;
  margin: 0 auto 1.25rem;
  display: block;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(30, 20, 40, 0.18);
}

.ms-hero .ms-tagline {
  font-size: 1.15rem;
  font-weight: 500;
  max-width: 40rem;
  margin: 0 auto 0.5rem;
  color: var(--md-default-fg-color--light);
}

.ms-hero .ms-version {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--md-default-fg-color--light);
  margin: 0 auto 1.75rem;
}

/* Gradient underline accent -- scoped to the hero wrapper only,
   so site-wide h1 styling is untouched. */
.ms-hero h1 {
  display: inline-block;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--ms-teal), var(--ms-violet)) 1;
  padding-bottom: 0.15rem;
}

/* Hero action row */
.ms-hero .ms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   6. Gradient CTA button (.ms-cta) -- teal -> violet, white text, hover lift
   -------------------------------------------------------------------------- */
.md-typeset .ms-cta,
.ms-cta {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, var(--ms-teal), var(--ms-violet));
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(78, 205, 196, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-typeset .ms-cta:hover,
.ms-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 109, 255, 0.35);
  color: #ffffff !important;
}

/* Secondary plain link sits next to the CTA */
.md-typeset .ms-secondary {
  font-weight: 600;
}