/* Firefly's BBQ brand tokens, pulled from the real fireflysbbq.com palette.
Shared by base.html, driver_status.html, and tracking_public.html so the
review app, driver page, and customer tracking page all look like the same
business. Page-specific layout stays in each template's own <style> block --
this file is just the shared brand layer (colors, fonts, a couple of
cross-page utility classes). No frontend build pipeline, plain CSS. */

:root {
  --ff-red: #D2232A;
  --ff-red-dark: #8B0000;
  --ff-orange: #ED6605;
  --ff-gold: #EECC2C;
  --ff-lime: #BADA55;
  --ff-cream: #F0EBCE;
  --ff-cream-light: #FDF6ED;
  --ff-ink: #2F2E2E;
  --ff-gray: #8F8F8F;
  --ff-white: #FFFFFF;

  --ff-font-heading: 'Poppins', 'Century Gothic', Helvetica, Arial, sans-serif;
  --ff-font-body: 'Play', Helvetica, Arial, sans-serif;
}

.ff-btn {
  display: inline-block;
  padding: 10px 20px;
  font-family: var(--ff-font-heading);
  font-weight: 600;
  font-size: 14px;
  border: 2px solid var(--ff-red);
  border-radius: 8px;
  background: var(--ff-white);
  color: var(--ff-red);
  cursor: pointer;
  text-decoration: none;
}

.ff-btn-primary {
  background: var(--ff-red);
  color: var(--ff-white);
}

.ff-card {
  background: var(--ff-white);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(47, 46, 46, 0.15);
}

.badge {
  display: inline-block;
  min-width: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--ff-font-heading);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}

.badge-blocker {
  background: #fdecea;
  color: var(--ff-red-dark);
}

.badge-review {
  background: #fdf6d8;
  color: #8a6d00;
}

.badge-fyi {
  background: #f2f2ee;
  color: #555;
}

.badge-zero {
  background: transparent;
  color: var(--ff-gray);
}