/* PickPilot — brand/theme layer on top of Tailwind + DaisyUI.
   Loaded AFTER the DaisyUI CDN css. Keep this thin: DaisyUI does the components,
   this only adds brand polish that doesn't exist as a utility/component.
   Everything here maps 1:1 onto a Dioxus + Tailwind setup later. */

:root {
  --brand: #16a34a;        /* field green */
  --brand-d: #128a3e;
  --navy: #0c1726;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* hero gradient — not expressible as a single utility, so it lives here */
.hero-bg {
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(22,163,74,.28), transparent 60%),
    radial-gradient(800px 400px at 8% 0%, rgba(37,99,235,.18), transparent 55%),
    var(--navy);
}

/* round team badge — reusable token (becomes a Dioxus `Team` component) */
.team {
  width: 38px; height: 38px; border-radius: 9999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.team.lg { width: 56px; height: 56px; font-size: 17px; }
.team.sm { width: 28px; height: 28px; font-size: 10.5px; }
.team.used { filter: grayscale(1); opacity: .38; }

/* the "explained recommendation" accent — your differentiator's signature look */
.rec-accent { border-top: 4px solid var(--brand); }
.why-box { background: #f3fbf6; border: 1px solid #d9f0e2; }

/* small helper for the comparison table highlight column */
.col-us { background: #f3fbf6; }