/* ============================================================
   THE PERKY PLATE — DESIGN TOKENS
   Brand palette sampled from assets/logos (plum #9F3778, butter #F8F390).
   Contrast (WCAG): white on --accent-deep 6.38, --accent-deep on
   --accent-tint 5.70, --butter on --accent-deep 5.53, white on --accent 4.89.
   ============================================================ */
:root{
  /* Brand */
  --accent:        #B8468C;   /* Perky plum (bright) — pins, dots, brand shapes */
  --accent-deep:   #9F3778;   /* Logo plum — filled buttons + accent text (AA) */
  --accent-ink:    #8A2C68;   /* Darkest plum — gradient ends, pressed states */
  --accent-tint:   #FBEFF5;   /* Accent surface wash */
  --accent-tint2:  #F6DDEA;
  --butter:        #F8F390;   /* Logo yellow — text/marks ON plum only */
  --accent-rgb:    159,55,120;

  /* Semantic */
  --save:          #0E7A45;   /* Savings / redeemed */
  --save-tint:     #E8F6EE;
  --warn:          #9A6100;   /* Expiring soon */
  --warn-tint:     #FFF4DE;

  /* Neutrals */
  --ink:           #0E1216;
  --ink-2:         #525C6B;
  --ink-3:         #697180;
  --line:          #E8EBEF;
  --line-2:        #F1F3F6;
  --surface:       #FFFFFF;
  --canvas:        #F7F8FA;
  --scrim:         rgba(14,18,22,.44);

  /* Map */
  --map-bg:        #EEF1F5;
  --map-block:     #FFFFFF;
  --map-road:      #E2E6EC;
  --map-park:      #DFF0E2;
  --map-water:     #D6E7F7;

  /* Radius */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* Elevation */
  --e1: 0 1px 2px rgba(14,18,22,.06), 0 1px 1px rgba(14,18,22,.04);
  --e2: 0 4px 14px rgba(14,18,22,.08), 0 1px 3px rgba(14,18,22,.05);
  --e3: 0 12px 34px rgba(14,18,22,.14), 0 2px 8px rgba(14,18,22,.06);
  --e-pin: 0 4px 10px rgba(14,18,22,.22);

  /* Motion */
  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 380ms;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  /* Display face: titles + wordmark only. Very condensed, so it runs ~1.3x the
     system size with neutral tracking. Body copy stays on --font (spec §4.2).
     Use with font-weight ~760 + font-synthesis:none: Mouzambik has one weight
     (no faux bold), while fallback digits render bold to match its color. */
  --font-display: "Mouzambik Smooth", var(--font);
  --font-brand:   "Mouzambik Inktrap", var(--font);
  --safe-b: 22px;
}