/* ============================================================
   Circi — Theme · Sky Clinical (Light Blue + Coral)
   Sky-blue primary with a warm coral accent for icons & badges.
   ============================================================ */

:root {
  /* Primary: Sky blue family */
  --navy:        #0369A1;     /* sky-700 - deep enough for body text role */
  --navy-deep:   #075985;
  --navy-2:      #0284C7;     /* sky-600 */
  --navy-3:      #38BDF8;     /* sky-400 - for muted highlights */

  /* Ink — softer slate */
  --ink:         #0F2942;
  --ink-2:       #475569;
  --ink-3:       #94A3B8;

  /* Surfaces — pale sky-tinted */
  --rule:        #DCEAF5;
  --rule-soft:   #EDF4FA;
  --paper:       #F4F9FD;
  --paper-2:     #E6F1FA;
  --surface:     #FFFFFF;
  --surface-2:   #F4F9FD;

  /* Secondary accent: Coral / Warm peach (icons, eyebrows) */
  --teal:        #F87171;     /* coral-400 */
  --teal-deep:   #DC2626;
  --teal-ink:    #991B1B;
  --teal-soft:   #FEE2E2;

  /* Success: soft mint */
  --success:      #10B981;
  --success-deep: #059669;
  --success-soft: #D1FAE5;
  --success-ink:  #065F46;
}

/* Avatars */
.directory .card .av.teal,
.testimonials .q-avatar.teal {
  background: linear-gradient(135deg, #FB7185, #DC2626) !important;
  color: #fff !important;
}
.directory .card .av.navy,
.testimonials .q-avatar.navy {
  background: linear-gradient(135deg, #0EA5E9, #075985) !important;
  color: #fff !important;
}
.directory .card .av.plum,
.testimonials .q-avatar.plum {
  background: linear-gradient(135deg, #818CF8, #4338CA) !important;
  color: #fff !important;
}
.testimonials .q-avatar.gold {
  background: linear-gradient(135deg, #38BDF8, #0284C7) !important;
  color: #fff !important;
}
.testimonials .q-avatar.sage {
  background: linear-gradient(135deg, #34D399, #047857) !important;
  color: #fff !important;
}

/* Translucent accent mixes */
.site-footer .newsletter .nl-form:focus-within { box-shadow: 0 0 0 4px rgba(248,113,113,0.18); }
.directory .chip.consult { border-color: rgba(248,113,113,0.32); background: var(--teal-soft) !important; color: var(--teal-ink) !important; }
.directory .chip.consult svg { color: var(--teal-deep) !important; }
.trust .pi-ico { background: var(--teal-soft); color: var(--teal-ink); border-color: rgba(248,113,113,0.24); }
.trust .statement-glyph .gtile { background: var(--teal-soft); color: var(--teal-deep); border-color: rgba(248,113,113,0.24); }
.statement-card p.statement-body .em,
.trust p.statement-body .em {
  background: linear-gradient(180deg, transparent 64%, rgba(248,113,113,0.28) 64%) !important;
}

/* Billing chip — mint success */
.directory .chip.billing {
  background: var(--success-soft) !important;
  color: var(--success-ink) !important;
  border-color: rgba(16,185,129,0.32) !important;
}
.directory .chip.billing svg { color: var(--success-deep) !important; }

/* GP CTA */
.built .col.gp .col-cta .button { background: var(--teal); color: #fff !important; }
.built .col.gp .col-cta .button:hover { background: var(--teal-deep); }

/* Hero sheen */
.hero {
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(56,189,248,0.10), transparent 70%),
    var(--paper);
}

/* Ghost button + footer hairlines */
.btn-ghost { border-color: rgba(3,105,161,0.22) !important; }
.btn-ghost:hover { background: rgba(3,105,161,0.04) !important; }
.site-footer .newsletter {
  border-top-color: rgba(3,105,161,0.10);
  border-bottom-color: rgba(3,105,161,0.10);
}