:root {
  --page-background: #686682;
  --page-text: #ffffff;
  --page-secondary: #f0eef5;
  --page-accent: #f5e1f2;
}

body,
.nav,
.shop {
  background: var(--page-background);
}

.nav,
.hero,
.strip,
#guide,
#videos,
.shop,
.faq,
footer {
  color: var(--page-text);
}

.hero .lede,
.hero .fine,
#guide .sectionhead p,
#guide .numbered p,
#videos p,
.shop > .wrap > div:first-child .fine,
.faq details p,
footer .wrap {
  color: var(--page-secondary);
}

.hero .eyebrow,
.hero h1 em,
#guide .eyebrow,
#guide .numbered > span,
#videos .eyebrow,
#videos .numbered > span,
.shop > .wrap > div:first-child .eyebrow,
.faq .eyebrow {
  color: var(--page-accent);
}

.hero .btn.outline,
#guide .btn.outline {
  color: var(--page-text);
  border-color: var(--page-text);
}

.hero .btn.outline:hover,
#guide .btn.outline:hover {
  background: #ffffff18;
}

.visual,
.shop-box {
  color: var(--ink);
}

#guide .gaits b {
  color: var(--page-text);
}

#guide .walk::before { color: #f3a1c4; }
#guide .trot::before { color: #f0b184; }
#guide .canter::before { color: #bedaff; }

/* Preserve the current color theme on the simplified page. */
body { color: var(--page-text); }
#book p, #about p, #samples p, .sample figcaption, footer { color: var(--page-secondary); }
#book .eyebrow, nav a:hover { color: var(--page-accent); }
#book .btn.light { color: var(--page-text); border-color: var(--page-text); }
nav, section, .about { border-color: #ffffff40; }
#order { color: var(--ink); }
#order p { color: var(--muted); }