/* ==========================================================================
   Bring Local Food Back — "Receipts, softened"
   Brand tokens + base utilities. Derived verbatim from the brand system block.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Anton&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Caveat:wght@600;700&display=swap');

:root {
  /* Brand color — exact values */
  --green-anchor:   #2E7D44; /* anchor green  */
  --green-headline: #1F5A30; /* headline green */
  --green-700:      #2E7D44; /* dark-variant surface base */
  --green-800:      #1F5A30;
  --green-900:      #163F22; /* deep shade for dark gradients/scrims */
  --coral-cta:      #B8401F; /* CTA / link coral (coral-700) */
  --coral-bright:   #E85D3A; /* bright accent — large text/UI only */
  --butter:         #F6C14B; /* sunny highlight — fills/badges, INK text only */
  --ink:            #25301F;
  --cream:          #FDF6EC; /* surface */
  --paper:          #FFFDF8; /* surface-2 */
  --muted:          #5D6B53;

  /* Neutral scale */
  --n-50:  #FFFDF8;
  --n-100: #FDF6EC;
  --n-200: #E6DCC6;
  --n-300: #D3C7AB;
  --n-500: #8A8068;
  --n-600: #5D6B53;
  --n-700: #3F4A37;
  --n-900: #25301F;

  /* Type */
  --font-head:   'Baloo 2', system-ui, sans-serif;
  --font-hero:   'Anton', 'Baloo 2', sans-serif;
  --font-body:   'Hanken Grotesk', system-ui, sans-serif;
  --font-marker: 'Caveat', cursive;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px;

  /* Shape */
  --r-default: 18px;
  --r-card:    28px;
  --shadow-soft: 0 10px 30px rgba(37,48,31,.10);

  /* "Report card" stat palette (from BLFB_report_card_v5) */
  --rc-bg-1:   #163026; /* dark forest green (radial center) */
  --rc-bg-2:   #10201A; /* deeper edge */
  --rc-cream:  #F1EBDB; /* report-card cream */
  --rc-gold:   #E7B23C; /* amber-gold accent */
  --rc-green:  #5FD46A; /* bright highlight green */
  --rc-shadow: #0A140F; /* long-shadow near-black */
  --rc-muted:  #A9A48F; /* muted source text */
}

* { box-sizing: border-box; }

/* ---- shared social-graphic primitives -------------------------------- */

.bf-card {
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* The butter "fresh & local" pill badge — a system corner device */
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--butter);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.bf-badge .dot {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--green-headline);
  flex: none;
}

/* Pill CTA button */
.bf-cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--paper);
  background: var(--coral-cta);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.bf-cta.green { background: var(--green-anchor); }

/* The hero Anton number */
.bf-number {
  font-family: var(--font-hero);
  line-height: .9;
  letter-spacing: .005em;
  color: var(--green-headline);
}

/* Rounded photo frame wrapper */
.bf-frame {
  position: relative;
  overflow: hidden;
  background: var(--n-200);
  border-radius: var(--r-card);
}

/* Caveat marker accent */
.bf-marker {
  font-family: var(--font-marker);
  font-weight: 700;
  line-height: 1;
}

/* image-slot placeholder look */
image-slot {
  --is-bg: var(--n-200);
  background: var(--n-200);
}