/* ============================================
   OrderShield — Sage & Warm Theme
   Light scheme with forest green + burnt amber
   ============================================ */

/* Light hero — warm sage gradient */
.hero {
  background: linear-gradient(135deg, #D5E8D4 0%, #E2EFDF 40%, #F0F5EE 100%);
}
.hero::before {
  background:
    radial-gradient(circle at 25% 40%, rgba(45, 106, 79, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 75% 60%, rgba(180, 83, 9, 0.04) 0%, transparent 40%);
}
.hero h1 { color: #1C1917; }
.hero h1 span {
  background: linear-gradient(135deg, #2D6A4F, #059669);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero .eyebrow { color: #2D6A4F; }
.hero__subtitle { color: #44403C; }
.hero .btn--outline {
  color: #1B4332;
  border-color: rgba(45, 106, 79, 0.3);
}
.hero .btn--outline:hover {
  background-color: rgba(45, 106, 79, 0.06);
  border-color: rgba(45, 106, 79, 0.5);
  color: #1B4332;
}

/* Light navbar */
.navbar { background-color: #FDFCFA; border-bottom: 1px solid #E2DDD5; }
.navbar.scrolled { box-shadow: 0 2px 16px rgba(28, 25, 23, 0.06); }
.navbar__logo-text { color: #1C1917; }
.navbar__logo-icon { background: linear-gradient(135deg, #2D6A4F, #1B4332); }
.navbar__link { color: #57534E; }
.navbar__link:hover { color: #1B4332; background-color: rgba(45, 106, 79, 0.04); }
.btn--outline { color: #1B4332; border-color: #D6D3D1; }
.btn--outline:hover { background-color: rgba(45, 106, 79, 0.04); border-color: #A8A29E; color: #1B4332; }
.navbar__mobile-toggle { color: #1C1917; }
.navbar__mobile-toggle:hover { background-color: rgba(45, 106, 79, 0.04); }

/* Light mobile menu */
.mobile-menu { background-color: #FDFCFA; }
.mobile-menu__link { color: #57534E; }
.mobile-menu__link:hover { color: #1B4332; background-color: rgba(45, 106, 79, 0.04); }
.mobile-menu__divider { background-color: #E2DDD5; }

/* Buttons */
.btn--primary { background-color: #B45309; color: #fff; }
.btn--primary:hover { background-color: #92400E; color: #fff; }

/* Eyebrow */
.eyebrow { color: #2D6A4F; }

/* Icons */
.card__icon, .trust-bar__icon, .step-card__icon { background-color: rgba(45, 106, 79, 0.06); color: #2D6A4F; }

/* Stats */
.stats { background-color: #1B4332; }
.stat__value--accent {
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* CTA Section */
.cta-section { background: linear-gradient(135deg, #1B4332, #2D6A4F); }
.cta-section::before {
  background:
    radial-gradient(circle at 30% 50%, rgba(82, 183, 136, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(180, 83, 9, 0.08) 0%, transparent 40%);
}
.cta-section .eyebrow { color: #52B788; }

/* Footer */
.footer { background-color: #1B4332; }
.footer__bottom { border-top-color: rgba(255, 255, 255, 0.1); }
.footer .navbar__logo-icon { background: linear-gradient(135deg, #52B788, #2D6A4F); }
.footer__heading { color: #D1FAE5; }
.footer__link { color: #A8C8B8; }
.footer__link:hover { color: #D1FAE5; }
.footer__contact-item { color: #A8C8B8; }
.footer__contact-item svg { color: #A8C8B8; }
.footer__brand p { color: #A8C8B8; }
.footer__bottom { color: #A8C8B8; }

/* Step numbers */
.step-card__number { background: linear-gradient(135deg, #2D6A4F, #1B4332); }

/* Trust bar */
.trust-bar { background-color: #FDFCFA; border-color: #E2DDD5; }

/* Alt sections */
.section--alt { background-color: #F5F0EB; }

/* Page hero (non-homepage) — lighter variant */
.page-hero {
  background: linear-gradient(135deg, #D5E8D4 0%, #E2EFDF 50%, #F0F5EE 100%);
  padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16);
}
.page-hero h1 { color: #1C1917; }
.page-hero p { color: #44403C; }
.page-hero .eyebrow { color: #2D6A4F; }

/* Form styles for Sage theme */
.form-input {
  border-color: #E2DDD5;
  background-color: #FFFFFF;
  color: #1C1917;
}
.form-input:focus {
  border-color: #2D6A4F;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}
.form-input::placeholder { color: #A8A29E; }
.form-label { color: #1C1917; }
.form-helper { color: #78716C; }

/* Docs-specific */
.docs-nav { background-color: #FDFCFA; border-color: #E2DDD5; }
.docs-tab.active { color: #1B4332; border-color: #2D6A4F; }
.docs-tab { color: #78716C; }
.docs-tab:hover { color: #1B4332; }
.code-block { background-color: #292524; color: #FDFCFA; }