/* Catppuccin Mocha-inspired theme overrides for Material (slate scheme) */
[data-md-color-scheme="slate"] {
  /* Core background and foreground - Catppuccin Mocha */
  --md-default-bg-color: #0b1220; /* deep navy to match hero */
  --md-default-fg-color: #e6eaf5; /* light foreground */
  --md-default-fg-color--light: #ccd4ea;
  --md-default-fg-color--lighter: #b8c2e0;
  --md-default-fg-color--lightest: #a7b0d3;

  /* Accent palette */
  --md-primary-fg-color: #7aa2ff; /* hero-matched azure */
  --md-primary-fg-color--light: #a8c3ff;
  --md-primary-fg-color--dark: #4f7dff;
  --md-accent-fg-color: #a78bfa; /* violet accent from hero tones */
  --md-primary-bg-color: #0a1020;

  /* Surfaces */
  --tf-surface-1: #0e1729;
  --tf-surface-2: #15213a;
  --tf-border: #1f2d4d;
  --tf-crust: #0a1020;
}

/* Header + tabs */
[data-md-color-scheme="slate"] .md-header {
  background-color: var(--tf-crust);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--tf-border);
}

[data-md-color-scheme="slate"] .md-header__title {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-header__button {
  color: var(--md-default-fg-color--lighter);
}

[data-md-color-scheme="slate"] .md-tabs {
  background: var(--tf-surface-1);
  box-shadow: inset 0 -1px 0 var(--tf-border);
}

[data-md-color-scheme="slate"] .md-tabs__item {
  color: var(--md-default-fg-color--lighter);
}

[data-md-color-scheme="slate"] .md-tabs__item:hover {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: var(--md-default-fg-color);
  border-bottom: 2px solid var(--md-accent-fg-color);
}

/* Side navigation */
[data-md-color-scheme="slate"] .md-nav__link {
  color: var(--md-default-fg-color--lighter);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--md-default-fg-color);
  background-color: rgba(59,59,83,0.25);
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--md-default-fg-color);
  background-color: rgba(59,59,83,0.4);
}

/* Tables & code */
.md-typeset table { border-color: var(--tf-border); }
[data-md-color-scheme="slate"] .md-typeset code,
[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: rgba(24,24,37,0.85);
  color: var(--md-default-fg-color);
  border: 1px solid rgba(59,59,83,0.8);
  border-radius: 8px;
}

/* Links */
[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--md-primary-fg-color);
}
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--md-primary-fg-color--dark);
}

/* Footer */
[data-md-color-scheme="slate"] .md-footer {
  background: var(--tf-crust);
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--tf-border);
}
[data-md-color-scheme="slate"] .md-footer__inner { background: transparent; }
[data-md-color-scheme="slate"] .md-footer__link { color: var(--md-default-fg-color--lighter); }
[data-md-color-scheme="slate"] .md-footer__link:hover { color: var(--md-accent-fg-color); }
[data-md-color-scheme="slate"] .md-footer-meta {
  background: var(--tf-surface-1);
  border-top: 1px solid var(--tf-border);
  color: var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .md-footer__direction { color: var(--md-default-fg-color--lighter); }
[data-md-color-scheme="slate"] .md-footer__direction:hover { color: var(--md-accent-fg-color); }

/* Hero section styling */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section,
.hero-section h1,
.hero-section p {
  color: #ffffff !important; /* ensure white text in both light and dark modes */
}

.hero-section a {
  color: #ffffff !important;
}

.hero-section h1 {
  line-height: 1.2;
}

.hero-section a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.hero-section a[href*="getting-started/installation"]:hover {
  background-color: rgba(99, 102, 241, 1);
}

.hero-section a[href*="quick-start"]:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Responsive hero section */
@media screen and (max-width: 768px) {
  .hero-section {
    padding: 2.5rem 1rem;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section p {
    font-size: 1.2rem;
  }
  
  .hero-section div {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-section a {
    width: 100%;
    max-width: 280px;
  }
}