/*
  CUSTOMER THEME OVERRIDE
  Re-points the same CSS custom properties app.css already uses everywhere
  (buttons, header, badges, the receipt motif, the mega menu, flash-sale
  strip, etc.) to a green/orange/cream palette, matching the brand colors
  supplied by the customer. Loaded only by layouts/web.php, after app.css —
  vendor.php / rider.php / admin.php don't include this file, so their
  indigo/gold chrome is unaffected. Typography (Fraunces/Inter/Plex Mono)
  is unchanged; only color tokens move.
*/

:root {
    --indigo: #1E5B34;        /* was #26305C — now primary brand green */
    --indigo-deep: #0F3D22;   /* was #171F3D — deep green for hover/dark chrome */
    --gold: #F0900D;          /* was #E8A23A — accent orange */
    --gold-deep: #D17A05;     /* was #C97F1E — deep orange for hover */
    --paper: #F8F4E9;         /* was #F5F6FA — warm cream page background */
    --line: #E7E0CC;          /* was cool-grey — warm-toned hairlines to match cream */
    --tan: #ECE4CF;           /* new token: icon-badge circles, warm accent fills */
}

/* Icon-circle fills (category grid, trust strip) read a touch warmer than a
   flat --paper repeat would give, matching the flyer's tan benefit-icon
   badges rather than reusing the page background verbatim. */
.cat-icon-grid .icon-circle,
.icon-circle {
    background: var(--tan);
}

/* Category icons cycle through a small brand-derived palette instead of
   one identical tan circle for all 18 categories — distinct enough to
   help scan the grid, still clearly one family, not arbitrary colors. */
.cat-icon-grid a:nth-child(6n+1) .icon-circle { background: #E4EFE6; color: #1E5B34; }
.cat-icon-grid a:nth-child(6n+2) .icon-circle { background: #FBE8D3; color: #B5651D; }
.cat-icon-grid a:nth-child(6n+3) .icon-circle { background: #F0E6D2; color: #6B4423; }
.cat-icon-grid a:nth-child(6n+4) .icon-circle { background: #E8F0EC; color: #2E7D5B; }
.cat-icon-grid a:nth-child(6n+5) .icon-circle { background: #FDEFE0; color: #C1440E; }
.cat-icon-grid a:nth-child(6n+6) .icon-circle { background: #EDEAD9; color: #8B5A2B; }

.category-rail a:nth-child(6n+1) svg { color: #1E5B34; }
.category-rail a:nth-child(6n+2) svg { color: #B5651D; }
.category-rail a:nth-child(6n+3) svg { color: #6B4423; }
.category-rail a:nth-child(6n+4) svg { color: #2E7D5B; }
.category-rail a:nth-child(6n+5) svg { color: #C1440E; }
.category-rail a:nth-child(6n+6) svg { color: #8B5A2B; }