/* Sprouts Chiro — Palette + UI Tokens
   Derived from hero illustration (greens, blues, whites, greys, oranges).
   Drop-in for Bootstrap 5.3+. */

:root{
  /* Core neutrals */
  --sprout-white: #F8FAF8;       /* (248,250,248) */
  --sprout-ink:   #1B1F1D;
  --sprout-muted: rgba(27,31,29,.72);
  --sprout-line:  rgba(27,31,29,.10);

  /* Greens (brand + nature) */
  --sprout-green-700: #619F5E;   /* (97,159,94) primary brand */
  --sprout-green-600: #4E8653;   /* deeper accent (tuned) */
  --sprout-green-500: #A3CF96;   /* (163,207,150) soft */
  --sprout-green-400: #CCDE9D;   /* (204,222,157) light */
  --sprout-green-300: #B4D6A8;   /* (180,214,168) tuned */

  /* Blues (wayfinding + trust) */
  --sprout-blue-700:  #306B8F;   /* (48,107,143) */
  --sprout-blue-600:  #2F91A5;   /* (47,145,165) */
  --sprout-blue-200:  #B2CED0;   /* (178,206,205) */

  /* Greys (UI chrome) */
  --sprout-gray-500:  #A2B0A2;   /* (162,176,162) */
  --sprout-gray-600:  #5A695D;   /* tuned from (90,105,93) */
  --sprout-gray-700:  #32403A;   /* tuned */

  /* Orange (warm highlight) */
  --sprout-orange-500:#D8956E;   /* (216,149,110) */
  --sprout-orange-200:#D2B19F;   /* (210,177,159) */

  /* Soft surfaces */
  --sprout-surface:   #FFFFFF;
  --sprout-soft:      #F3F8F6;   /* near-white green tint */
  --sprout-soft-2:    #EEF6F2;   /* lighter */
  --sprout-glow:      rgba(97,159,94,.18);

  /* Radius + shadow */
  --sprout-radius:    16px;
  --sprout-radius-sm: 12px;
  --sprout-shadow:    0 18px 46px rgba(16,24,40,.10);
  --sprout-shadow-sm: 0 10px 28px rgba(16,24,40,.08);
}

/* Bootstrap theme overrides (works with Bootstrap 5.3+) */
:root{
  --bs-body-bg: var(--sprout-white);
  --bs-body-color: var(--sprout-ink);
  --bs-secondary-color: var(--sprout-muted);

  /* Primary/Success mapped to brand green */
  --bs-primary: var(--sprout-green-700);
  --bs-success: var(--sprout-green-700);

  /* Links */
  --bs-link-color: var(--sprout-blue-700);
  --bs-link-hover-color: var(--sprout-blue-600);

  /* Borders */
  --bs-border-color: rgba(27,31,29,.12);
}

/* Base typography */
html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,.display-font{
  font-family: Manrope, Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Layout helpers */
.container-narrow{ max-width: 1120px; }
.section{ padding: 72px 0; }
.bg-soft{ background: var(--sprout-soft); }
.bg-soft-2{ background: var(--sprout-soft-2); }
.border-soft{ border: 1px solid var(--sprout-line) !important; }
.hr-soft{ height:1px; background: var(--sprout-line); border:0; margin: 0; }

/* Buttons */
.btn-success,
.btn-primary{
  --bs-btn-bg: var(--sprout-green-700);
  --bs-btn-border-color: rgba(27,31,29,.10);
  --bs-btn-hover-bg: var(--sprout-green-600);
  --bs-btn-hover-border-color: rgba(27,31,29,.14);
  --bs-btn-active-bg: var(--sprout-green-600);
  --bs-btn-active-border-color: rgba(27,31,29,.16);
  --bs-btn-focus-shadow-rgb: 97,159,94;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(97,159,94,.18);
}
.btn-outline-secondary{
  --bs-btn-color: var(--sprout-gray-700);
  --bs-btn-border-color: rgba(50,64,58,.25);
  --bs-btn-hover-bg: rgba(50,64,58,.06);
  --bs-btn-hover-border-color: rgba(50,64,58,.30);
  border-radius: 12px;
  font-weight: 700;
}
.btn-lg{ padding: .95rem 1.2rem; }

/* Badges / chips */
.badge.text-bg-light{
  background: rgba(255,255,255,.8) !important;
  border: 1px solid rgba(27,31,29,.12) !important;
  color: rgba(27,31,29,.82) !important;
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 600;
}

/* Cards */
.card, .card-soft{
  border-radius: var(--sprout-radius);
  border: 1px solid rgba(27,31,29,.10);
  background: var(--sprout-surface);
  box-shadow: var(--sprout-shadow-sm);
}
.card-soft{
  background:
    radial-gradient(circle at 15% 25%, rgba(180,214,168,.28), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 85% 70%, rgba(47,145,165,.14), rgba(255,255,255,0) 60%),
    var(--sprout-surface);
}

/* Navbar (subtle glass) */
.navbar.bg-white{
  background: rgba(248,250,248,.88) !important;
  backdrop-filter: blur(10px);
}
.navbar .nav-link{
  color: rgba(27,31,29,.80);
  font-weight: 600;
}
.navbar .nav-link:hover{ color: rgba(27,31,29,.92); }

/* Hero helpers */
.hero{
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-220px -260px auto auto;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle at 30% 30%, rgba(180,214,168,.40), rgba(47,145,165,.12) 55%, rgba(255,255,255,0) 72%);
  transform: rotate(12deg);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto auto -220px -260px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle at 30% 30%, rgba(204,222,157,.30), rgba(97,159,94,.10) 55%, rgba(255,255,255,0) 74%);
  transform: rotate(-8deg);
  pointer-events:none;
}

/* Illustration presentation */
.hero-illustration,
img.illustration{
  filter: drop-shadow(0 18px 38px rgba(16,24,40,.10));
}

/* Links */
a{ text-underline-offset: 2px; }
a:hover{ text-decoration-thickness: 2px; }

/* Forms */
.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(27,31,29,.16);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(97,159,94,.55);
  box-shadow: 0 0 0 .25rem rgba(97,159,94,.18);
}

/* List-group tweaks (Insights) */
.list-group-item{
  border-color: rgba(27,31,29,.10);
}
.list-group-item-action:hover{
  background: rgba(180,214,168,.18);
}

/* Footer */
footer{
  color: rgba(27,31,29,.70);
}

/* Accents (optional utility classes) */
.text-sprout-green{ color: var(--sprout-green-700) !important; }
.text-sprout-blue{ color: var(--sprout-blue-700) !important; }
.bg-sprout-green-soft{ background: rgba(180,214,168,.22) !important; }
.bg-sprout-blue-soft{ background: rgba(47,145,165,.12) !important; }
.bg-sprout-orange-soft{ background: rgba(216,149,110,.18) !important; }

/* Sticky mobile CTA polishing */
@media (max-width: 991.98px){
  .position-fixed.bottom-0.bg-white{
    background: rgba(248,250,248,.92) !important;
    backdrop-filter: blur(10px);
  }
}