:root {
  --admincraft-dirt: #805539;
  --admincraft-grass: #5f7f3b;
  --admincraft-ink: #252018;
  --md-primary-fg-color: #6f4933;
  --md-primary-fg-color--light: #94684a;
  --md-primary-fg-color--dark: #4b3022;
  --md-accent-fg-color: #658746;
}

/* Tint Material's own schemes rather than declaring new ones.
 *
 * Material derives a lot from each scheme: --md-default-fg-color--light and
 * --lighter, --md-code-fg-color, table and border colours. Those are only
 * defined by the built-in schemes, so overriding the background alone leaves
 * every derived colour at its light-mode value. Extending "slate" keeps its
 * dark derivatives and changes just the brand colours. */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #fbf9f4;
  --md-default-fg-color: var(--admincraft-ink);
  --md-code-bg-color: #eee9dd;
}

[data-md-color-scheme="slate"] {
  /* Warm the neutrals; the foreground colours stay Material's, which is what
   * keeps text and code readable here. */
  --md-default-bg-color: #171510;
  --md-code-bg-color: #242018;
  --md-primary-fg-color: #543824;
  --md-accent-fg-color: #9dbc6f;
}

.md-header,
.md-tabs {
  background-image: linear-gradient(90deg, #503321, #805539 55%, #5f7f3b);
}

/* The logo is 16px pixel art, so it must scale with hard edges. Material renders
 * it twice, in the header and in the navigation drawer, and targeting only the
 * header left the drawer copy smoothly interpolated and blurry. */
.md-logo img,
.md-logo svg {
  image-rendering: pixelated;
}

.admincraft-hero {
  margin: 0 0 2rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid rgb(128 85 57 / 35%);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--admincraft-dirt) 35%, transparent);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--admincraft-dirt) 15%, transparent), transparent 55%),
    linear-gradient(315deg, color-mix(in srgb, var(--admincraft-grass) 18%, transparent), transparent 55%);
}

.admincraft-hero h1 {
  margin: 0.35rem 0 0.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.admincraft-hero p {
  max-width: 45rem;
  margin-right: auto;
  margin-left: auto;
  font-size: 1.05rem;
}

.admincraft-hero__logo {
  width: 5rem;
  height: 5rem;
  image-rendering: pixelated;
  filter: drop-shadow(0 0.55rem 0.7rem rgb(0 0 0 / 20%));
}

.admincraft-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.admincraft-cards > ul > li {
  border-radius: 0.75rem;
}

.md-button--primary {
  background-color: var(--admincraft-grass) !important;
  border-color: var(--admincraft-grass) !important;
}

@media (max-width: 44.9844em) {
  .admincraft-hero {
    padding: 1.5rem 1rem;
  }
}