:root {
  --nav-font-family: "Pirata One", Georgia, serif;
  --font-body: var(--nav-font-family);
  --brand-font-body: var(--nav-font-family);
  --brand-font-display: "Pirata One", Georgia, serif;
  --brand-primary: #B45535;
  --brand-primary-ink: #FFFFFF;
  --brand-surface: #f5f1ee;
  --nav-color-primary: #B45535;
  --nav-color-primary-hover: #963F27;
  --nav-color-primary-active: #78321F;
  --nav-color-on-primary: #FFFFFF;
  --nav-color-on-brand: #FFFFFF;
  --nav-color-link: #8A321E;
  --nav-color-link-hover: #652313;
  --nav-color-surface-subtle: #f5f1ee;
  --nav-color-bg: #ffffff;
  --nav-color-surface: #ffffff;
  --nav-color-surface-raised: #faf8f6;
  --nav-color-text: #111111;
  --nav-color-text-muted: #5a5552;
  --nav-color-border: #d9d2cd;
}

@media (prefers-color-scheme: dark) {
  :root {
  --nav-font-family: "Pirata One", Georgia, serif;
  --font-body: var(--nav-font-family);
  --brand-font-body: var(--nav-font-family);
  --brand-font-display: "Pirata One", Georgia, serif;
  --brand-primary: #F0A080;
  --brand-primary-ink: #111111;
  --brand-surface: #211a17;
  --nav-color-primary: #F0A080;
  --nav-color-primary-hover: #F6B49A;
  --nav-color-primary-active: #F9C8B3;
  --nav-color-on-primary: #111111;
  --nav-color-on-brand: #111111;
  --nav-color-link: #F0A080;
  --nav-color-link-hover: #F6B49A;
  --nav-color-surface-subtle: #211a17;
  --nav-color-bg: #111111;
  --nav-color-surface: #181412;
  --nav-color-surface-raised: #211a17;
  --nav-color-text: #f8f6f4;
  --nav-color-text-muted: #c9c1bd;
  --nav-color-border: #493a34;
  }
}