/* Tokens from the Parallaxe design system */
:root {
  --px-canvas: #ececec;
  --px-surface: #f7f7f7;
  --px-elevated: #e2e2e2;
  --px-fg: #1a1a1a;
  --px-fg-2: #5e5e5e;
  --px-border: #c9c9c9;
  --px-accent: #3452d6;
  --px-on-accent: #ffffff;
  --px-focus: #2142c9;
}

[data-md-color-scheme="slate"] {
  --px-canvas: #1b1b1b;
  --px-surface: #232323;
  --px-elevated: #2e2e2e;
  --px-fg: #ededed;
  --px-fg-2: #9e9e9e;
  --px-border: #3a3a3a;
  --px-accent: #8a9dff;
  --px-on-accent: #0e1330;
  --px-focus: #aebbff;
}

:root,
[data-md-color-scheme="slate"] {
  --md-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --md-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --md-primary-fg-color: var(--px-canvas);
  --md-primary-fg-color--light: var(--px-surface);
  --md-primary-fg-color--dark: var(--px-canvas);
  --md-primary-bg-color: var(--px-fg);
  --md-primary-bg-color--light: var(--px-fg-2);
  --md-accent-fg-color: var(--px-accent);
  --md-typeset-a-color: var(--px-accent);
  --md-default-bg-color: var(--px-surface);
  --md-default-fg-color--lightest: var(--px-border);
  --md-footer-bg-color: var(--px-canvas);
  --md-footer-bg-color--dark: var(--px-canvas);
  --md-footer-fg-color: var(--px-fg);
  --md-footer-fg-color--light: var(--px-fg-2);
  --md-footer-fg-color--lighter: var(--px-fg-2);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--px-canvas);
  --md-code-bg-color: var(--px-surface);
}

.md-header,
.md-tabs {
  background-color: var(--px-canvas);
  color: var(--px-fg);
  border-bottom: 1px solid var(--px-border);
  box-shadow: none;
}

.md-header[data-md-state="shadow"],
.md-header--shadow {
  box-shadow: none;
}

.md-tabs__link {
  opacity: 0.75;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
  color: var(--px-accent);
}

.md-search__form {
  background-color: var(--px-elevated);
}

.md-typeset {
  font-size: 0.75rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--px-fg);
}

.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--px-border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.7rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--px-elevated);
}

.md-typeset .md-button {
  border-radius: 10px;
  border-color: var(--px-accent);
  color: var(--px-accent);
}

.md-typeset .md-button--primary {
  background-color: var(--px-accent);
  color: var(--px-on-accent);
}

.md-typeset .md-button:focus-visible,
.md-typeset a:focus-visible {
  outline: 2px solid var(--px-focus);
  outline-offset: 2px;
}

/* Home hero */
.px-hero {
  padding: 2.5rem 0 1.5rem;
}

.px-hero h1 {
  font-size: 2.6rem;
  margin: 0 0 0.4rem;
}

.px-hero .px-tagline {
  font-size: 1.05rem;
  color: var(--px-fg-2);
  max-width: 38rem;
  margin: 0 0 1.4rem;
}

.md-typeset .grid.cards > ul > li {
  border-radius: 14px;
  border-color: var(--px-border);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--px-accent);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.md-header__button.md-logo img {
  height: 1.6rem;
  border-radius: 6px;
}

@media screen and (min-width: 60em) {
  .md-typeset .grid.cards {
    grid-template-columns: repeat(2, 1fr);
  }
}