/* ============================================================
   THEME OVERHAUL (preview skin) — applied site-wide.
   Violet accent · Poppins headings · Mulish body · Newsreader
   serif display · light lilac background.
   Loaded LAST on every page so it overrides the base tokens
   (v4.css / home.css / v5.css / v6.css).
   Fonts are loaded via the Google Fonts <link> in each page head.
   ============================================================ */

/* --- design tokens: recolor + retype the whole site at once --- */
:root,
body.home-lite,
body.v5 {
  --paper:        oklch(0.985 0.008 300);
  --card:         #ffffff;
  --ink:          oklch(0.25 0.03 300);
  --sub:          oklch(0.50 0.03 300);
  --hair:         oklch(0.92 0.010 300);
  --hair-strong:  oklch(0.85 0.020 300);
  --accent:       oklch(0.52 0.20 300);
  --accent-deep:  oklch(0.42 0.20 300);
  --accent-soft:  oklch(0.93 0.05 300);
  --serif:        'Newsreader', Georgia, serif;
  --sans:         'Mulish', system-ui, sans-serif;
}

/* --- base surface + body text --- */
html, body { background: var(--paper); }
body,
body.home-lite,
body.v5 { font-family: 'Mulish', system-ui, sans-serif; color: var(--ink); }
body.v5 .prose, body.v5 .lede, body.v5 p, body.home-lite p { font-family: 'Mulish', system-ui, sans-serif; }

/* --- headings: the theme's display sans (Poppins) --- */
h1, h2, h3, h4,
body.home-lite h1, body.home-lite h2, body.home-lite h3,
body.v5 h1, body.v5 h2, body.v5 h3,
.hero h1, .hero-simple h1, .titleblock h1, .work__title, .card__h, .feature__h {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600;
}

/* --- brand wordmark --- */
.brand { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }

/* --- keep Newsreader serif for the cover figures (the "receipt" numbers) --- */
.selwork .card__fig, .selwork .feature__fig { font-family: 'Newsreader', Georgia, serif !important; }
.selwork .card__figsub, .selwork .feature__figsub { font-family: 'Newsreader', Georgia, serif !important; font-style: italic !important; }

/* --- accents that were hard-set to the old terracotta --- */
a { color: var(--accent); }
.hero-accent, .hero h1 em, em.hero-accent { color: var(--accent); }

/* --- pill buttons, rounded to match the new card language --- */
.button { border-radius: 100px !important; }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover, .button.primary:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }

/* --- soften a few big surfaces toward the rounded look --- */
.about-card, .hero-portrait, .project-card, .verdict, dl.verdict, .factrow { border-radius: 14px; overflow: hidden; }

/* --- favicon-tinted bits / focus rings pick up the accent via tokens --- */
:focus-visible { outline-color: var(--accent); }

/* --- "Ask my agent" CTA: chat icon + live typing dots --- */
.chat-cta { display: inline-flex; align-items: center; gap: 9px; }
.chat-cta .cta-ic { flex: none; transition: transform .25s ease; }
.chat-cta:hover .cta-ic { transform: scale(1.09); }
.chat-cta .cta-dot { animation: ctaBlink 1.6s infinite both; }
.chat-cta .cta-dot:nth-of-type(2) { animation-delay: .22s; }
.chat-cta .cta-dot:nth-of-type(3) { animation-delay: .44s; }
@keyframes ctaBlink { 0%, 72%, 100% { opacity: .45; } 36% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chat-cta .cta-dot { animation: none; opacity: .9; }
  .chat-cta:hover .cta-ic { transform: none; }
}