:root {
  color-scheme: dark;
  --paper: var(--bg-primary);
  --paper-muted: var(--bg-secondary);
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --rule: var(--border-color);
  --red: var(--accent-color);
  --asphalt: var(--bg-primary);
}

html,
body,
body.bg-paper {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.bg-paper { background-color: var(--paper) !important; }
.bg-paper-muted,
.story-section,
.pass-section,
.help-card-contact { background-color: var(--paper-muted) !important; }
.text-ink { color: var(--ink) !important; }
.text-ink-light,
.text-ink-subtle { color: var(--ink-soft) !important; }
.bg-rule { background-color: var(--rule) !important; }
.ring-paper { --tw-ring-color: var(--paper) !important; }
.editorial-border,
.product-section,
.feature-section,
.feature-index article,
.feature-index details,
.benefit-list > div,
.pass-note,
.story-section,
.faq-section,
.faq-list details { border-color: var(--rule) !important; }

.eyebrow,
.page-container::before,
.help-card::before,
.help-card-contact .mail { color: var(--accent-text); }
.hero-photo > div:nth-child(2),
.photo-caption,
#app li,
.feature-index dd,
.pass-note p,
.product-more > p:not(.eyebrow):not(.section-intro),
.product-note,
.benefit-list dd,
.faq-list p,
.help-card p,
.page-subtitle { color: var(--ink-soft) !important; }

.store-link {
  background: var(--bg-secondary);
  border-color: var(--text-tertiary);
  color: var(--ink);
}
.store-link:hover,
[class~="hover:bg-paper-muted"]:hover { background: var(--bg-tertiary) !important; }
.app-carousel,
.product-screens { scrollbar-color: var(--text-tertiary) var(--bg-secondary); }
.app-carousel img { border-color: var(--border-color) !important; }
.help-card:hover { background: var(--bg-tertiary); }
.skip-link:focus { background: var(--ink); color: var(--paper); }