/* ==========================================================================
   CURB RELIEF v3 DESIGN TOKENS: the ONLY place colors and fonts live.
   Red kept v3's orange/grey palette for round 2: #FFA300 sun orange,
   #666666 charcoal, #FFFFFF. The Curb Relief wings are recoloured to sun
   orange (brand/curb-relief-*.svg). Sans-serif only (Red hard rule).
   Ratios in comments are WCAG contrast against the paired background.
   ========================================================================== */
:root {
  /* Brand (from brand/INVENTORY.md) */
  --brand-sun:      #FFA300;  /* Daybreak sun orange: accents, big shapes, primary buttons */
  --brand-charcoal: #666666;  /* Daybreak roofline/wordmark charcoal: logo, large decor. 5.7:1 on white (AA) */
  --brand-white:    #FFFFFF;
  --dirty-bird:     #FD9947;  /* Dirty Bird Squad orange: Pip's wings echo it */

  /* Working colors */
  --ink:        #2E2E2E;  /* body text, deep charcoal. 13.6:1 on white (AAA) */
  --ink-soft:   #545454;  /* secondary text (Home Hub charcoal). 7.6:1 on white (AAA) */
  --cream:      #FFF8EE;  /* warm page background. Ink 12.9:1 */
  --paper:      var(--brand-white);
  --tint:       #FFF1D6;  /* hero "daybreak" glow. Ink 12.0:1 */
  --tint-strong:#FFE2B0;  /* soft orange panels. Ink 10.1:1 */
  --sun:        var(--brand-sun);  /* ink on sun 6.8:1 (AAA for 22px bold button text) */
  --sun-deep:   #F08C00;  /* hover */
  --ember:      #E0631A;  /* Pip's beak (decorative only) */
  --night:      #2E2E2E;  /* dark sections. White on night 13.6:1 */
  --on-night:   #FFFFFF;
  --ok:         #1E6B3A;  /* success text/border. 6.6:1 on white */
  --ok-soft:    #E4F3E8;
  --error:      #A3240F;  /* error text. 6.9:1 on white */
  --error-soft: #FDECE8;
  --focus:      #2E2E2E;
  --focus-halo: var(--brand-sun);

  --rule:       #EADFCB;  /* thin dividers */
  --off:        #E8E2D6;  /* switch "off" track, disabled buttons */
  --curb-a:     #A9A9A9;  /* sidewalk stripes (decorative) */
  --curb-b:     #C9C9C9;

  /* Mascot art (mascots.js) uses these same hex values inline. */
  --bin-body:  var(--brand-charcoal);  /* gray trash cart */
  --bin-lid:   #4A4A4A;
  --bin-badge: var(--brand-sun);
  --bin-recycle: #2F6FB8;  /* blue recycling cart (decorative) */
  --bin-green:   #4E8F2E;  /* green-waste cart (decorative) */
  --bin-wheel: var(--ink);

  /* Fonts: Montserrat matches the Daybreak geometric wordmark;
     Atkinson Hyperlegible keeps long text easy for older eyes. */
  --font-display: "Montserrat", "Gotham", "Avenir Next", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif;

  /* Type scale (body never below 20px) */
  --text-body: 1.25rem;     /* 20px */
  --text-small: 1.125rem;   /* 18px floor */
  --text-lead: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
  --text-h3: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --text-h2: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --text-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);

  /* Shape */
  --radius: 22px;
  --radius-sm: 14px;
  --tap: 56px;
  --shadow: 0 6px 0 var(--ink);

  /* Premium hover (every clickable card): 4px lift, deeper offset + soft ambient shadow */
  --dur: 200ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --lift: translateY(-4px);
  --shadow-soft: 0 4px 0 var(--ink), 0 10px 24px rgba(46,46,46,.08);
  --shadow-hover: 0 9px 0 var(--ink), 0 22px 44px rgba(46,46,46,.18);
}
@media (prefers-reduced-motion: reduce) { :root { --lift: none; --dur: 0ms; } }