/* Catppuccin-inspired dark accents for codemol docs */

:root {
  --cat-crust: #11111b;
  --cat-mantle: #181825;
  --cat-base: #1e1e2e;
  --cat-surface0: #313244;
  --cat-surface1: #45475a;
  --cat-overlay0: #6c7086;
  --cat-text: #cdd6f4;
  --cat-subtext0: #a6adc8;
  --cat-lavender: #b4befe;
  --cat-mauve: #cba6f7;
  --cat-green: #a6e3a1;
  --cat-red: #f38ba8;
  --cat-yellow: #f9e2af;
  --cat-peach: #fab387;
}

/* Dark scheme overrides */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--cat-base);
  --md-default-fg-color: var(--cat-text);
  --md-code-bg-color: var(--cat-mantle);
  --md-code-fg-color: var(--cat-text);
}

/* Console-style code blocks */
[data-md-color-scheme="slate"] code {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 0.82rem;
}

[data-md-color-scheme="slate"] .md-typeset pre {
  border-left: 3px solid var(--cat-mauve);
  border-radius: 6px;
}

/* Admonition tweaks */
[data-md-color-scheme="slate"] .md-typeset .admonition {
  border-radius: 6px;
}

/* Navigation accent */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--cat-mantle);
}

/* Mermaid diagram background */
[data-md-color-scheme="slate"] .mermaid {
  background: var(--cat-mantle);
  border-radius: 8px;
  padding: 1rem;
}

/* Table styling */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-radius: 6px;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--cat-surface0);
}

/* Hero section for home page */
.hero {
  text-align: center;
  padding: 2rem 0;
}

.hero img {
  max-width: 180px;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.15rem;
  color: var(--md-default-fg-color--light);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.feature-card {
  background: var(--md-code-bg-color);
  border-radius: 8px;
  padding: 1.25rem;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.feature-card h3 {
  margin-top: 0;
  color: var(--md-accent-fg-color);
}