:root {
  --mp-ink: #171717;
  --mp-paper: #f4f2ed;
  --mp-line: #d7d2c8;
  --mp-yellow: #ffd21c;
  --mp-orange: #ff9f1a;
  --mp-green: #168f50;
}

body.bg-surface { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
body > header { background: var(--mp-ink) !important; color: #fff !important; border-color: #303030 !important; }
body > header a, body > header button, body > header span { color: inherit; }
body > header .text-on-surface-variant { color: #d7d7d7 !important; }
body > header .text-primary { color: var(--mp-yellow) !important; }
.bg-surface { background-color: var(--mp-paper) !important; }
.bg-surface-container-low, .bg-surface-container-lowest { background-color: #fff !important; }
.bg-surface-container, .bg-surface-container-high { background-color: #ebe8e1 !important; }
.text-primary { color: var(--mp-ink) !important; }
.border-outline-variant, .border-surface-container-high { border-color: var(--mp-line) !important; }
main .bg-primary { background-color: var(--mp-green) !important; color: #fff !important; }
main .hover\:bg-primary-container:hover { background-color: #0f7440 !important; }
main .bg-primary-fixed, main .bg-primary-container { background-color: var(--mp-yellow) !important; color: var(--mp-ink) !important; }
main img { background: #fff; }
body > footer { background: var(--mp-ink) !important; color: #fff !important; }
body > footer .text-on-surface-variant { color: #c9c9c9 !important; }
body > footer .text-primary { color: var(--mp-yellow) !important; }
body > header.bg-surface { background: var(--mp-ink) !important; }
body > header.bg-surface .text-primary { color: var(--mp-yellow) !important; }
body > header.bg-surface .text-on-surface,
body > header.bg-surface .text-on-background { color: #fff !important; }
body > footer.bg-primary { background: var(--mp-ink) !important; }

@media (max-width: 768px) {
  body > header { position: sticky; top: 0; z-index: 50; }
}