/**
 * Extra CSS for MagicON AI Documentation
 * Custom styles for branding and enhanced UI
 */

/* Custom color overrides */
:root {
  --md-primary-fg-color: #3b82f6;
  --md-accent-fg-color: #10b981;
}

/* Dark mode custom colors */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #60a5fa;
  --md-accent-fg-color: #34d399;
}

/* Enhanced code blocks */
.highlight {
  border-radius: 6px;
}

/* Grid cards layout */
.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

/* Custom card styling */
.md-typeset .grid.cards > * {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 1.5rem;
  background: var(--md-default-bg-color);
  transition: all 0.2s ease;
}

.md-typeset .grid.cards > *:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--md-accent-fg-color);
}

/* Improved table styling */
.md-typeset table:not([class]) {
  border-radius: 6px;
  overflow: hidden;
}

/* Custom admonition colors */
.md-typeset .admonition.tip {
  border-color: #10b981;
}

.md-typeset .admonition.tip > .admonition-title {
  background-color: rgba(16, 185, 129, 0.1);
}

/* Better link hover effects */
.md-typeset a:hover {
  text-decoration: underline;
  transition: all 0.2s ease;
}

/* Custom header styling */
.md-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}