/* Neobrutalist shapes (@ecommons/ui), Onboarding color palette */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  --color-cream: #F4F4F2;
  --color-cream-dark: #E5E5E2;
  --color-terracotta: #22883F;
  --color-amber: #166534;
  --color-charcoal: #0F1F17;
  --color-charcoal-light: #14532D;
  --color-sand: #E9E9E9;
  --color-sand-dark: #6B7280;
  --color-green: #22883F;
  --color-red: #C42D2D;
  --font-title: 'Barlow Condensed', sans-serif;
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --block-shadow-color: var(--color-charcoal);
  --block-shadow: 4px 4px 0 var(--block-shadow-color);
  --block-shadow-sm: 3px 3px 0 var(--block-shadow-color);
  --block-shadow-hover: 6px 6px 0 var(--block-shadow-color);

  /* Material color system -> app palette */
  --md-primary-fg-color: var(--color-charcoal);
  --md-primary-fg-color--light: var(--color-charcoal-light);
  --md-primary-fg-color--dark: var(--color-charcoal);
  --md-primary-bg-color: var(--color-cream);
  --md-accent-fg-color: var(--color-terracotta);
  --md-accent-fg-color--transparent: rgba(34, 136, 63, 0.1);
  --md-accent-bg-color: var(--color-cream);

  --md-default-fg-color: var(--color-charcoal);
  --md-default-bg-color: var(--color-cream);
  --md-typeset-a-color: var(--color-terracotta);

  --md-code-bg-color: var(--color-sand);
  --md-code-fg-color: var(--color-charcoal);
}

/* Typography */
.md-typeset,
.md-typeset .md-content__button,
body {
  font-family: var(--font-sans);
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__topic,
.md-nav__title,
.md-tabs__link {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.md-typeset h1 { font-size: 2.4rem; }
.md-typeset h2 { font-size: 1.8rem; border-bottom: none; }
.md-typeset a {
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--color-terracotta);
}
.md-typeset a:hover { background-color: var(--color-amber); box-shadow: inset 0 -2px 0 var(--color-charcoal); }

/* Kill rounded corners everywhere, brutalist rule */
.md-typeset table,
.md-typeset code,
.md-typeset pre,
.md-typeset .admonition,
.md-typeset .highlight,
.md-typeset img,
.md-search__form,
.md-search__inner .md-search__input,
.md-nav__link,
.md-tabs__link,
.md-footer__link,
.md-typeset details {
  border-radius: 0 !important;
}

/* Header */
.md-header {
  background-color: var(--color-charcoal);
  border-bottom: 3px solid var(--color-terracotta);
  box-shadow: none;
}
.md-tabs {
  background-color: var(--color-charcoal-light);
}
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--color-amber);
}

/* Sidebar nav */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--color-terracotta);
}
.md-nav__item .md-nav__link--active {
  font-weight: 700;
}

/* Search box: give it the button treatment */
.md-search__form {
  border: 2px solid var(--color-charcoal);
  box-shadow: var(--block-shadow-sm);
  background-color: var(--color-cream);
}
.md-search__input + .md-search__icon { color: var(--color-charcoal); }

/* Code blocks */
.md-typeset pre > code,
.md-typeset .highlight {
  border: 2px solid var(--color-charcoal);
  box-shadow: var(--block-shadow-sm);
}
.md-typeset code {
  border: 1px solid var(--color-sand-dark);
}

/* Tables -> card treatment */
.md-typeset table:not([class]) {
  border: 2px solid var(--color-charcoal);
  box-shadow: var(--block-shadow);
}
.md-typeset table:not([class]) th {
  background-color: var(--color-charcoal);
  color: var(--color-cream);
  font-family: var(--font-title);
}
.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: var(--color-sand);
}

/* Admonitions -> block cards */
.md-typeset .admonition,
.md-typeset details {
  border: 2px solid var(--color-charcoal);
  box-shadow: var(--block-shadow);
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--font-title);
  font-weight: 700;
}

/* Buttons rendered from markdown links styled as buttons */
.md-typeset .md-button {
  border: 2px solid var(--color-charcoal);
  border-radius: 0;
  background-color: var(--color-terracotta);
  color: white;
  font-weight: 600;
  box-shadow: var(--block-shadow-sm);
  transition: transform 0.1s, box-shadow 0.1s;
}
.md-typeset .md-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--block-shadow-hover);
  color: white;
  background-color: var(--color-terracotta);
}
.md-typeset .md-button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--block-shadow-color);
}

/* Footer prev/next -> card treatment */
.md-footer__link {
  background-color: var(--color-charcoal);
}
.md-footer-nav__link:hover {
  background-color: var(--color-charcoal-light);
}

/* Content home cards, if used via grid cards */
.md-typeset .grid.cards > ul > li {
  border: 2px solid var(--color-charcoal);
  border-radius: 0;
  box-shadow: var(--block-shadow);
  transition: transform 0.1s, box-shadow 0.1s;
}
.md-typeset .grid.cards > ul > li:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--block-shadow-hover);
}