/* Bootstrap-friendly theme layer (LIGHT redesign) */
:root{
  --tire-bg: #f6f7fb;
  --tire-text: #0f172a;          /* slate-900 */
  --tire-muted: rgba(15,23,42,.72);
  --tire-border: rgba(15,23,42,.12);
  --tire-surface: rgba(255,255,255,.86);
  --tire-surface-2: rgba(255,255,255,.72);
  --tire-shadow: 0 14px 44px rgba(15,23,42,.10);
  --tire-brand: #0ea5e9;         /* sky-500 */
  --tire-brand-2: #7c3aed;       /* violet-600 */
}

body{
  color: var(--tire-text);
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(14,165,233,.18), transparent 55%),
    radial-gradient(800px 600px at 90% 10%, rgba(124,58,237,.12), transparent 55%),
    radial-gradient(900px 700px at 30% 100%, rgba(34,197,94,.10), transparent 60%),
    var(--tire-bg);
}

/* Bootstrap theme vars (works with CDN build) */
body{
  --bs-body-color: var(--tire-text);
  --bs-body-color-rgb: 15,23,42;
  --bs-body-bg: var(--tire-bg);
  --bs-border-color: var(--tire-border);
  --bs-primary: var(--tire-brand);
  --bs-primary-rgb: 14,165,233;
}

.navbar{
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.80) !important;
  border-bottom: 1px solid var(--tire-border);
}

.navbar .nav-link{
  color: rgba(15,23,42,.72) !important;
}
.navbar .nav-link:hover{
  color: rgba(15,23,42,.92) !important;
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: rgba(15,23,42,.96) !important;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 2px;
}

.tire-card{
  background: var(--tire-surface);
  border: 1px solid var(--tire-border);
  box-shadow: var(--tire-shadow);
}

.tire-badge-ok{
  background: rgba(34,197,94,.14);
  color: rgba(21,128,61,.95);
  border: 1px solid rgba(34,197,94,.28);
}
.tire-badge-bad{
  background: rgba(244,63,94,.12);
  color: rgba(190,18,60,.95);
  border: 1px solid rgba(244,63,94,.26);
}

.hero{
  padding: 3rem 0 1.5rem;
}
.hero .lead{ max-width: 72ch; }

.footer{
  padding: 2.2rem 0 2.6rem;
  border-top: 1px solid var(--tire-border);
  background: rgba(255,255,255,.55);
}

.logo-pill{
  width: 36px; height: 36px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(124,58,237,.88));
  display: grid; place-items:center;
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
}
.logo-pill svg{ width: 22px; height: 22px; color: rgba(255,255,255,.94); }

/* Make info button match new brand a bit more */
.btn-info{
  --bs-btn-bg: rgba(14,165,233,.12);
  --bs-btn-border-color: rgba(14,165,233,.30);
  --bs-btn-color: rgba(15,23,42,.92);
  --bs-btn-hover-bg: rgba(14,165,233,.18);
  --bs-btn-hover-border-color: rgba(14,165,233,.40);
  --bs-btn-hover-color: rgba(15,23,42,.96);
}

/* Ensure toggler icon is visible in light navbar */
.navbar.navbar-light .navbar-toggler-icon{
  filter: none;
}

/* Accordion theme (Bootstrap defaults are too light for the dark hero) */
.accordion-item.tire-card{ overflow: hidden; }
.accordion-button{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(13,202,240,.18);
}
.accordion-button:not(.collapsed){
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
  box-shadow: none;
}
.accordion-button::after{ filter: invert(1); opacity: .85; }
.accordion-body{ color: rgba(255,255,255,.78); }

@media (prefers-color-scheme: light){
  .accordion-button{
    background: rgba(255,255,255,.85);
    color: rgba(15,23,42,.92);
  }
  .accordion-button:not(.collapsed){ background: rgba(255,255,255,.92); color: rgba(15,23,42,.92); }
  .accordion-button::after{ filter: none; opacity: 1; }
  .accordion-body{ color: rgba(15,23,42,.78); }
}