html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); text-wrap: pretty; }
a { color: var(--color-accent-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-accent-900); text-decoration-thickness: 2px; }

/* dark ink — a second deliberate palette, not an inversion */
body[data-theme="dark"] {
  --color-bg: #1b1a19; --color-text: #eae7e7;
  --color-divider: #3b3835;
  --color-accent-700: #6fc4de; --color-accent-900: #a8dcec;
  --color-accent-2-700: #ff85b5;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 2px 8px rgba(0,0,0,0.55); --shadow-lg: 0 6px 24px rgba(0,0,0,0.6);
}
/* the plate constructions multiply onto paper; on dark ink they flip to a single light plate */
body[data-theme="dark"] .cmyk-head .plate, body[data-theme="dark"] .cmyk-num .plate { display: none; }
body[data-theme="dark"] .cmyk-head .paper, body[data-theme="dark"] .cmyk-num .paper { color: var(--color-text); text-shadow: none; }
body[data-theme="dark"] .cmyk-num { --cmyk-num-ground: transparent; }

/* styles.css's `.nav a { color: inherit }` outranks `.btn-primary`'s own
   `color: var(--color-bg)` (class+element beats a single class), so the
   "Get started" button's text was always the inherited dark nav color, not
   its intended light one. At rest that reads as low-but-visible contrast
   on the teal fill; on hover `.nav a:hover` (higher specificity still)
   flips it to `--color-accent` — nearly identical to the `--color-accent-600`
   hover background — so the text all but disappears. Give the nav's button
   anchors their own color in both states, matching what .btn/.btn-primary
   already intend everywhere else on the page. */
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--color-bg); }

@keyframes rv-flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv-flow-line { animation: none !important; }
}

/* responsive collapse hooks — layout only; all look stays inline */
@media (max-width: 960px) { .rv-group { grid-template-columns: 1fr !important; } }
@media (max-width: 760px) { .rv-side { display: none !important; } .rv-navlink { display: none !important; } }

/* Install tabs — active state (replaces the design tool's per-render
   inline color/border computation with a plain CSS class toggle) */
.rv-tab {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  background: none; border: none; cursor: pointer;
  padding: 8px 14px; margin-bottom: -1px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  border-bottom: 2px solid transparent;
}
.rv-tab.is-active { color: var(--color-text); border-bottom-color: var(--color-accent); }