:root {
  --dtmb-dark-moss: #1f3a34;
  --dtmb-dark-slate: #183345;
  --dtmb-muted-teal: #3c5d60;
  --dtmb-light-mint: #c0d6d2;
  --dtmb-slate-grey: #6a8890;
}

/* Light mode */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1f3a34;
  --md-primary-fg-color--light: #3c5d60;
  --md-primary-fg-color--dark: #183345;
  --md-accent-fg-color: #6a8890;
  --md-accent-fg-color--transparent: rgba(106, 136, 144, 0.1);
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --card-hover-border: var(--md-primary-fg-color);
  --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #3c5d60;
  --md-primary-fg-color--light: #6a8890;
  --md-primary-fg-color--dark: #1f3a34;
  --md-accent-fg-color: #c0d6d2;
  --md-accent-fg-color--transparent: rgba(192, 214, 210, 0.1);
  --card-bg: #1e293b;
  --card-border: #334155;
  --card-hover-border: var(--md-accent-fg-color);
  --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
}

/* Header styling */
.md-header {
  background-color: var(--md-primary-fg-color);
}

/* Link hover colors */
.md-typeset a:hover {
  color: var(--dtmb-slate-grey);
}

/* Code block accents */
.md-typeset code {
  background-color: var(--md-accent-fg-color--transparent);
}

/* --- CUSTOM CARDS FOR HOMEPAGE --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s ease-in-out;
  text-decoration: none !important; /* Remove underline from link */
  color: var(--md-typeset-color) !important;
  box-shadow: none;
}

.card:hover {
  border-color: var(--card-hover-border);
  transform: translateY(-3px);
  box-shadow: var(--card-shadow);
}

.card h3 {
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--md-primary-fg-color) !important;
}

.card h3 .twemoji {
  color: var(--md-primary-fg-color) !important;
}

.card p {
  margin-bottom: 0 !important;
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.5;
}

/* Adjust Dark Mode Card Text */
[data-md-color-scheme="slate"] .card h3 {
    color: var(--md-accent-fg-color) !important;
}