/* ============================================================
   Connected Rider — brand theme layer
   Adopted from the marketing site: Fraunces + Public Sans,
   paper background, plum/saddle/pasture palette.
   Loaded AFTER the app bundle so it wins the cascade.
   Remove the <link> in public/index.html to revert.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#FBF8F3;
  --sand:#F1EAE0;
  --plum:#4B002B;
  --plum-deep:#33001D;
  --saddle:#A97B4F;
  --pasture:#1D9E75;
  --ink:#26191F;
  --line:rgba(38,25,31,.12);
  /* Common app variable names — mapped in case the app uses them */
  --cr-primary:#4B002B;
  --cr-bg:#FBF8F3;
  --cr-surface:#FFFFFF;
  --cr-border:rgba(38,25,31,.12);
  --cr-text:#26191F;
  --cr-accent:#A97B4F;
  --cr-success:#1D9E75;
}

html, body, #root{
  background-color:var(--paper) !important;
}

body{
  font-family:'Public Sans', system-ui, -apple-system, sans-serif !important;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, .page-title, .screen-title, .section-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:600;
  letter-spacing:-0.01em;
}

button, input, select, textarea{
  font-family:'Public Sans', system-ui, sans-serif !important;
}


/* ---- Option B bottom nav: plum bar, cream pill on active tab ---- */
.bottom-nav{
  background:#4B002B !important;
  border:none !important;
  border-radius:22px !important;
  box-shadow:0 8px 24px rgba(51,0,29,.35) !important;
  padding:8px 10px !important;
  bottom:10px !important;
  width:calc(100% - 24px) !important;
  max-width:560px !important;
}
.bottom-nav .nav-item{
  color:#D8BFCB !important;
  background:transparent !important;
  border-radius:16px !important;
  padding:6px 12px !important;
  transition:background .15s ease, color .15s ease;
}
.bottom-nav .nav-item svg{color:inherit !important;stroke:currentColor}
.bottom-nav .nav-item:hover{color:#F1EAE0 !important}
.bottom-nav .nav-item.active{
  background:#F1EAE0 !important;
  color:#4B002B !important;
  font-weight:700;
}

/* ---- Headers repainted in the brand plum ---- */
.top-bar, .top-bar-row{
  background:#4B002B !important;
}
.top-bar h1, .top-bar h2, .top-bar .top-bar-row{
  background:transparent !important;
}

/* Warm the old lavender tint app-wide */
:root{ --cr-primary-light:#F8F0EC !important; }