/* Puts the free reading app (wp-content/plugins/bonded-reading/app) in the shared site look
   when it is served at /find-a-little-clarity/. Load after the app's style.css. */

:root {
  --paper: #fbf7f2;
  --ink: #1d3a4a;
  --muted: #5b6a73;
  --sage: #1f5570;
  --sage-dark: #1f5570;
  --rose: #fde4ef;
  --line: rgba(29, 58, 74, 0.14);
  --white: #fffdfa;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.button { border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.button.primary { background: var(--lv-pink); color: var(--lv-btn-ink); box-shadow: 0 8px 22px rgba(255, 134, 186, 0.35); }
.button.primary:hover { background: var(--lv-pink-hover); }
.button.secondary { background: var(--lv-sky); color: var(--lv-btn-ink); border-color: transparent; }
.button.secondary:hover { background: var(--lv-sky-hover); }
.hero { background:
    radial-gradient(ellipse 70% 60% at 90% 15%, var(--lv-sky-soft), transparent 60%),
    radial-gradient(ellipse 60% 55% at 5% 85%, var(--lv-pink-soft), transparent 55%); border-radius: 0 0 28px 28px; }
.focus-options input:checked + span { background: var(--lv-pink); border-color: var(--lv-pink-hover); color: var(--lv-btn-ink); }
.eyebrow > span { background: var(--lv-pink-hover); }
.kind-note > span, .scene-note span, .scene-spark { color: #e0629a; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline-color: var(--lv-navy); }

.lv-about-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; padding: 1.5rem 0 2rem; }
.lv-about-row .text-button { font-size: 0.9rem; color: var(--lv-navy); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; }

/* Replace the app's leftover sage greens with the site pastels */
.welcome-band { background: var(--lv-sky-soft); border-block-color: rgba(31, 85, 112, 0.12); color: var(--lv-ink); }
.welcome-band span + span:before { color: #e0629a; }
.setup-panel { background: var(--lv-pink-soft); border-color: rgba(29, 58, 74, 0.1); }
.setup-panel .kind-note { border-top-color: rgba(29, 58, 74, 0.12); }
.focus-options span { border-color: rgba(29, 58, 74, 0.2); background: var(--lv-white); }
.card-tile.selected { background: var(--lv-pink-soft); box-shadow: 0 0 0 3px var(--lv-pink-hover); }
.summary-card { background: var(--lv-sky-soft); border-color: rgba(31, 85, 112, 0.14); }
.summary-themes, .focus-note { border-color: rgba(31, 85, 112, 0.18); }
.handoff-card { background: var(--lv-pink-soft); border-color: rgba(29, 58, 74, 0.1); }
.journal-card { background: var(--lv-lavender); border-color: rgba(29, 58, 74, 0.1); }