@import url("shared-components.css");

:root {
  --navy: #34213f;
  --blue: #f06a5d;
  --teal: #796985;
  --amber: #c9d85b;
  --ink: #2d2431;
  --muted: #796f7d;
  --mist: #f7f1f6;
  --line: #dfd2e1;
  --white: #fffaff;
}

body { background: #efe5ee; }
.intro h1 { text-transform: uppercase; letter-spacing: -.06em; }
.phone { border: 7px solid #34213f; border-radius: 28px; box-shadow: 14px 18px 0 #d9ced8; }
.phone::before { width: 88px; height: 20px; background: #34213f; }
.top { background: #34213f; padding-bottom: 26px; }
.top.light { background: #fffaff; border-bottom: 4px solid #c9d85b; }
.top h3 { font-size: 27px; }
.search { border-radius: 8px; box-shadow: none; }
.content { padding: 17px; }
.card, .stat, .field { border-radius: 8px; box-shadow: 4px 4px 0 #e5dbe5; }
.service i { border-radius: 8px; background: #fffaff; box-shadow: 3px 3px 0 #c9d85b; }
.hero { border-radius: 8px; background: #c9d85b; color: #34213f; }
.hero small, .hero p { opacity: .78; }
.btn { border-radius: 8px; background: #f06a5d; box-shadow: 4px 4px 0 #34213f; }
.btn.compact { background: #34213f; color: white; }
.btn.secondary { background: #eee4f0; color: #5d376b; box-shadow: none; }
.status { border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.status, .timeline .done::before { background: #c9d85b; color: #3f4811; }
.status.amber { background: #f3c7c2; color: #80372f; }
.tabs { padding: 4px; border: 1px solid #dfd2e1; border-radius: 8px; background: #fffaff; }
.tab { flex: 1; padding: 8px 6px; border: 0; border-radius: 5px; text-align: center; background: transparent; }
.tab.on { background: #34213f; }
.avatar, .building-icon { border-radius: 8px; background: #eee2f0; color: #6c397c; }
.map { background: repeating-linear-gradient(45deg,#efe7f1,#efe7f1 12px,#e7dce9 12px,#e7dce9 24px); color: #f06a5d; }
.nav { left: 10px; right: 10px; bottom: 9px; height: 62px; border: 0; border-radius: 10px; background: #34213f; }
.nav span { color: #baabbf; }
.nav .on { color: #c9d85b; }
.link, .upload { color: #ce5146; }
.steps b.on { background: #f06a5d; }
.brand-logo { border-radius: 12px; box-shadow: 8px 8px 0 #c9d85b; }
[style*="border-color:#176bff"] { border-color: #f06a5d !important; box-shadow: 3px 3px 0 #c9d85b !important; }