/* =====================================================================
   CVS360 Brand Overrides
   File name suggestion: assets/css/brand.css
   Load AFTER assets/css/style.css
   ===================================================================== */

/* -----------------------------
   1) Brand Tokens
------------------------------ */
:root{
  /* Primary brand */
  --cvs-brand: #dc0032;

  /* Greys for blending */
  --cvs-gray-50:  #f7f7f8;
  --cvs-gray-100: #f1f2f4;
  --cvs-gray-200: #e6e8ec;
  --cvs-gray-300: #d2d6dd;
  --cvs-gray-400: #9aa3af;
  --cvs-gray-500: #6b7280;
  --cvs-gray-700: #374151;
  --cvs-gray-900: #111827;

  /* Brand interaction */
  --cvs-brand-weak: rgba(220, 0, 50, 0.12);
  --cvs-brand-soft: rgba(220, 0, 50, 0.20);
  --cvs-brand-ring: rgba(220, 0, 50, 0.30);

  /* Common UI tokens (safe defaults) */
  --cvs-radius: 1rem; /* matches rounded-4 feel */
  --cvs-border: 1px solid var(--cvs-gray-200);
}

/* -----------------------------
   2) Global type & surfaces
------------------------------ */
body{
  color: var(--cvs-gray-900);
}

.section,
.site-wrap{
  background: transparent;
}

a{
  color: var(--cvs-brand);
  text-decoration-color: rgba(220, 0, 50, 0.35);
}
a:hover{
  color: var(--cvs-brand);
  filter: brightness(0.92);
  text-decoration-color: rgba(220, 0, 50, 0.55);
}

/* Make subtle subtitles feel consistent */
.subtitle,
.hero-subtitle{
  color: var(--cvs-gray-700) !important;
  letter-spacing: 0.06em;
}

/* -----------------------------
   3) Buttons (Bootstrap-friendly)
------------------------------ */
.btn{
  border-radius: var(--cvs-radius);
}

/* Primary button overrides */
.btn-primary,
.btn.btn-primary{
  background-color: var(--cvs-brand) !important;
  border-color: var(--cvs-brand) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover{
  filter: brightness(0.95);
}

/* Focus ring */
.btn:focus,
.btn:focus-visible,
.btn-primary:focus,
.btn-primary:focus-visible{
  box-shadow: 0 0 0 .25rem var(--cvs-brand-ring) !important;
}

/* Outline button (white outline style seen in hero) */
.btn-white-outline{
  border-radius: var(--cvs-radius);
}

/* If your theme uses .btn-white-outline but not strong enough */
.btn.btn-white-outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
}
.btn.btn-white-outline:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
}

/* A “brand outline” utility, if you ever need it */
.btn-brand-outline{
  background: transparent;
  border: 1px solid var(--cvs-brand);
  color: var(--cvs-brand);
}
.btn-brand-outline:hover{
  background: var(--cvs-brand);
  color: #fff;
}

/* -----------------------------
   4) Badges & pills
------------------------------ */
.badge{
  border-radius: 999px;
}

.badge.bg-light{
  background: var(--cvs-gray-100) !important;
  color: var(--cvs-gray-900) !important;
  border: 1px solid var(--cvs-gray-200);
}

/* Optional: neutral “soft” badge */
.badge.badge-soft{
  background: var(--cvs-gray-50);
  border: var(--cvs-border);
  color: var(--cvs-gray-700);
}

/* -----------------------------
   5) Forms
------------------------------ */
.form-control{
  border-radius: calc(var(--cvs-radius) * 0.85);
  border: var(--cvs-border);
}

.form-control:focus{
  border-color: rgba(220, 0, 50, 0.45);
  box-shadow: 0 0 0 .25rem var(--cvs-brand-weak);
}

/* -----------------------------
   6) Cards / panels
------------------------------ */
.rounded-4{
  border-radius: var(--cvs-radius) !important;
}

/* If your theme has card-like blocks, this helps unify */
.price-table,
.testimonial,
.service-card,
.step-card,
.mission-statement,
.features__v2 .content{
  border-radius: var(--cvs-radius);
}

/* Subtle border for light theme sections (safe, not intrusive) */
.price-table,
.testimonial,
.service-card{
  border: 1px solid rgba(230, 232, 236, 0.65);
}

/* -----------------------------
   7) Hero CTA: ensure primary CTA is branded
   Your hero uses: <a class="btn" href="#contact">Request a Demo</a>
   This targets the first CTA button while leaving .btn-white-outline intact.
------------------------------ */
.hero__v6 .cta .btn:not(.btn-white-outline):not(.btn-primary){
  background: var(--cvs-brand);
  border: 1px solid var(--cvs-brand);
  color: #fff;
}
.hero__v6 .cta .btn:not(.btn-white-outline):not(.btn-primary):hover{
  filter: brightness(0.95);
}

/* -----------------------------
   8) Icons / accents
------------------------------ */
.bi.text-danger,
.text-danger{
  color: var(--cvs-brand) !important;
}

/* Optional: accent icons in feature/service cards */
.features__v2 .icon i,
.services__v3 .icon i{
  color: var(--cvs-brand);
}

/* -----------------------------
   9) Back to top button (if themed)
------------------------------ */
#back-to-top{
  border-radius: 999px;
}
#back-to-top:hover{
  filter: brightness(0.95);
}

/* -----------------------------
   10) Dark theme compatibility (Bootstrap data-bs-theme="dark")
------------------------------ */
[data-bs-theme="dark"]{
  --cvs-border: 1px solid rgba(255,255,255,0.10);
}

[data-bs-theme="dark"] body{
  color: rgba(255,255,255,0.92);
}

[data-bs-theme="dark"] .badge.bg-light{
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10);
}

[data-bs-theme="dark"] .form-control{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
}

[data-bs-theme="dark"] .form-control:focus{
  border-color: rgba(220, 0, 50, 0.55);
  box-shadow: 0 0 0 .25rem rgba(220, 0, 50, 0.18);
}

[data-bs-theme="dark"] .price-table,
[data-bs-theme="dark"] .testimonial,
[data-bs-theme="dark"] .service-card{
  border: 1px solid rgba(255,255,255,0.10);
}

/* =====================================================================
   End of file
   ===================================================================== */