/* Bump & Beyond brand theme: dirty pink wellness palette.
   Loaded after styles.css so color decisions stay centralized and easy to tune. */
:root {
  --color-primary: #bc8f8f;
  --color-primary-dark: #8f6264;
  --color-primary-deep: #6f464d;
  --color-primary-light: #f2e3e1;
  --color-primary-soft: #fbf3f1;
  --color-accent: #b8a093;
  --color-accent-light: #eaded6;
  --color-text: #2f2624;
  --color-muted: #6e5f5b;
  --color-bg: #fcf8f6;
  --color-surface: #ffffff;
  --color-surface-tint: #f7ece9;
  --color-line: #e5d2ce;
  --color-on-dark: #fff8f6;
  --color-focus: rgba(143, 98, 100, 0.42);
  --shadow-soft: 0 18px 50px rgba(111, 70, 77, 0.1);
  --shadow-lift: 0 28px 80px rgba(111, 70, 77, 0.16);

  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --surface: var(--color-surface);
  --surface-tint: var(--color-surface-tint);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --accent: var(--color-primary-dark);
  --accent-dark: var(--color-primary-deep);
  --blush: #efd0cc;
  --plum: var(--color-primary-deep);
  --gold: var(--color-accent);
  --on-dark: var(--color-on-dark);
}

body {
  background:
    radial-gradient(circle at top left, rgba(216, 167, 167, 0.36), transparent 22rem),
    radial-gradient(circle at 92% 18rem, rgba(184, 160, 147, 0.16), transparent 20rem),
    var(--color-bg);
  color: var(--color-text);
}

body::before {
  background-image:
    linear-gradient(rgba(111, 70, 77, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 70, 77, 0.028) 1px, transparent 1px);
}

.lazy-pack-page {
  background:
    linear-gradient(180deg, rgba(255, 250, 248, 0.8), rgba(255, 250, 248, 0) 34rem),
    var(--color-bg);
}

:focus-visible {
  outline-color: var(--color-focus);
}

.lazy-header {
  padding-bottom: 14px;
  padding-top: 14px;
}

.lazy-header .logo-brand {
  min-height: clamp(128px, 11vw, 168px);
}

.lazy-header .logo-brand img {
  height: clamp(128px, 11vw, 168px);
  max-width: min(360px, 72vw);
}

.skip-link,
.header-cta,
.button.primary,
.mobile-sticky-cta {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-dark);
}

.header-cta:hover,
.button.primary:hover,
.mobile-sticky-cta:hover {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  box-shadow: 0 12px 28px rgba(111, 70, 77, 0.24);
}

.button {
  background: rgba(255, 255, 255, 0.56);
  border-color: var(--color-line);
  color: var(--color-primary-deep);
}

.button:hover {
  background: var(--color-primary-soft);
  border-color: rgba(143, 98, 100, 0.42);
}

.eyebrow,
.section-grid a,
.safety-note a,
.site-footer a,
.challenge-list span {
  color: var(--color-primary-dark);
}

.site-header {
  border-bottom-color: var(--color-line);
}

.lazy-header {
  background: rgba(252, 248, 246, 0.88);
  border-bottom-color: rgba(229, 210, 206, 0.86);
  box-shadow: 0 10px 36px rgba(111, 70, 77, 0.07);
}

.header-nav {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(229, 210, 206, 0.9);
}

.header-nav a {
  color: var(--color-muted);
}

.header-nav a:hover {
  background: var(--color-primary-light);
  color: var(--color-text);
}

.pack-hero__visual > img,
.image-band img {
  box-shadow: var(--shadow-lift);
}

.pack-hero__panel {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-soft);
}

.pack-hero__panel > div {
  border-bottom-color: rgba(229, 210, 206, 0.92);
}

.pack-hero__panel > div:hover {
  background: var(--color-primary-soft);
}

.stat-number {
  color: var(--color-primary-deep);
}

.stat-label,
.lead,
.hero p,
.detail-row p,
.treatment-card p,
.image-band figcaption,
.site-footer,
.safety-note {
  color: var(--color-muted);
}

.pack-intro article,
.score-card,
.treatment-card {
  background: var(--color-primary-light);
}

.pack-intro article:nth-child(2),
.treatment-card {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.score-card label,
.challenge-list label {
  background: rgba(255, 255, 255, 0.76);
  border-color: transparent;
}

.score-card label:hover,
.challenge-list label:hover {
  background: var(--color-surface);
  box-shadow: 0 12px 30px rgba(111, 70, 77, 0.1);
}

.score-card input,
.challenge-list input {
  accent-color: var(--color-primary-dark);
}

.score-result,
.progress-box,
.cta-band {
  background:
    radial-gradient(circle at top right, rgba(242, 227, 225, 0.22), transparent 16rem),
    var(--color-primary-deep);
  color: var(--color-on-dark);
}

.progress-box.is-complete {
  background:
    radial-gradient(circle at top right, rgba(216, 167, 167, 0.34), transparent 16rem),
    linear-gradient(135deg, var(--color-primary-deep), #7d5356);
}

.score-result span,
.progress-box span,
.cta-band .eyebrow,
.cta-band .button:not(.primary),
.text-action,
.copy-status {
  color: #f1d2cd;
}

.score-result strong,
.progress-box,
.cta-band h2,
.cta-band .copy-card p {
  color: var(--color-on-dark);
}

.progress-bar {
  background: rgba(255, 248, 246, 0.18);
}

.progress-bar span {
  background: #e8b9b3;
}

.signal-grid details {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px rgba(229, 210, 206, 0.95);
}

.signal-grid details[open] {
  box-shadow: var(--shadow-soft);
}

.signal-grid p {
  color: var(--color-muted);
}

.signal-grid summary::before {
  background: #efd7d3;
  color: var(--color-primary-deep);
}

.signal-grid summary::after {
  color: var(--color-primary-dark);
}

.detail-row article:nth-child(odd) {
  background: var(--color-primary-light);
}

.detail-row article:nth-child(even) {
  background: var(--color-surface);
}

.detail-row article:hover {
  background: var(--color-primary-soft);
}

.detail-row h3::before {
  background: var(--color-primary-deep);
  color: var(--color-on-dark);
}

.price {
  color: var(--color-primary-deep) !important;
}

.treatment-summary {
  border-top-color: var(--color-line);
}

.treatment-benefit {
  background: var(--color-primary-light);
}

.treatment-benefit span {
  color: var(--color-primary-deep);
}

.treatment-benefit strong {
  color: var(--color-text);
}

.copy-card {
  background: rgba(255, 248, 246, 0.11);
  border-color: rgba(255, 248, 246, 0.28);
}

.copy-button {
  background: var(--color-on-dark);
  border-color: transparent;
  color: var(--color-primary-deep);
}

.copy-button:hover {
  background: #ffffff;
  border-color: transparent;
}

.site-footer {
  background: var(--color-primary-light);
}

.footer-brand p {
  color: var(--color-primary-deep);
}

.footer-disclaimer {
  border-top-color: var(--color-line);
}

@media (max-width: 720px) {
  .lazy-header .logo-brand {
    min-height: 118px;
  }

  .lazy-header .logo-brand img {
    height: 118px;
    max-width: min(320px, 86vw);
  }
}