/* "Navy & Verdant" shared theme + motion — the generic part every page on tokens.v2.css loads,
   so it isn't duplicated per page. Started as monitoring.html's own theme file; pulled out here
   the moment a second page needed the identical rules, same reasoning mockup-v2.css itself
   documents for why it exists as a shared file instead of per-page inline styles.

   Anything genuinely page-specific (a hero-radius call, a chart materialize-in, a number spring
   target) still lives in that page's own <page>-v2-theme.css — see monitoring-v2-theme.css for
   an example. Pages with nothing page-specific (account.html, medications.html, settings.html)
   just load this file and nothing else beyond tokens.v2.css.

   Loading Fraunces/Inter/JetBrains Mono from Google's CDN — same weights the finance dashboard
   loads for cross-app consistency; self-hosting all three is an outstanding follow-up noted in
   tokens.v2.css and the finance dashboard's equivalent file. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-height-tight);
}

/* ==================================================================
   MOTION — apple-design skill. Damping 1.0 (no bounce) throughout: nothing on this app is
   flicked or thrown, so nothing should overshoot. cubic-bezier(0.22, 1, 0.36, 1): the
   non-bouncy ease-out curve used everywhere in this system, on both apps.
   ================================================================== */

.btn {
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:active {
  transform: scale(0.97);
}

/* Same mechanism as base.css's .reveal-on-scroll everywhere else, nicer curve — timing/stagger
   untouched. */
.reveal-on-scroll {
  transition:
    opacity 340ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  /* Button press-scale stays even under reduced motion — a 150ms/3% tap acknowledgment, not
     the kind of large-scale motion that setting targets. base.css's own reduced-motion block
     already makes .reveal-on-scroll fully static, so there's nothing to add for it here. */
}