@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
  color-scheme: light only;

  --pc-green: #1D9E75;
  --pc-green-dark: #0F6E56;
  --pc-green-light: #E1F5EE;
  --pc-amber: #EF9F27;
  --pc-red: #E24B4A;
  --pc-bg: #ffffff;
  --pc-bg2: #f7f6f2;
  --pc-bg3: #efede8;
  --pc-border: rgba(0, 0, 0, 0.08);
  --pc-text: #1a1a18;
  --pc-text2: #4a4a45;
  --pc-text3: #767670;
  --pc-radius: 10px;
  --pc-radius-lg: 16px;
}

[data-md-color-scheme="punchcard"] {
  --md-primary-fg-color: var(--pc-green);
  --md-primary-fg-color--light: var(--pc-green);
  --md-primary-fg-color--dark: var(--pc-green-dark);
  --md-accent-fg-color: var(--pc-green-dark);

  --md-default-bg-color: var(--pc-bg);
  --md-default-fg-color: var(--pc-text);
  --md-default-fg-color--light: var(--pc-text2);
  --md-default-fg-color--lighter: var(--pc-text3);

  --md-typeset-a-color: var(--pc-green);
  --md-code-bg-color: var(--pc-bg2);
  --md-footer-bg-color: var(--pc-text);
  --md-admonition-fg-color: var(--pc-text);
}

body,
.md-typeset {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 300;
}

.md-typeset h1,
.md-typeset h2,
.md-header__title,
.md-nav__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
}

.md-typeset h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
}

.md-typeset h3,
.md-typeset h4 {
  font-weight: 500;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  border-radius: 7px;
}