[Component] Button, card, badge, and typography base styles

Part of Epic #340 — Sage & Blush UI Redesign

Depends on: #341 (design tokens)

Layer 1 — Base components. Nav, pages, and all UI built on top of these.

---

Current State

• Buttons: 8px border-radius, system blue #0071e3, 44px height (full tap target)
• Cards: border-radius: 10px, box-shadow: var(--shadow-sm), padding: var(--space-8) (32px — quite roomy)
• Badges: 12px border-radius pills (.badge), status pills with var(--radius-pill)
• Typography: no utility classes for dense label styles; --text-base: 16px (large)

Desired State

Bauhaus-inspired components: rectangular buttons, flat cards, semantic badge colours, compact type utilities.

---

Changes Required

Buttons

.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-warning {
  border-radius: 0;           /* rectangular — Bauhaus */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-nav); /* 12px */
  min-height: 32px;           /* compact; 44px on mobile via override */
  font-weight: 600;
}

Button colours update to use new tokens:

• .btn-primary: cobalt #5B7FA6
• .btn-danger: blush #B5624E tones
• .btn-warning: amber #C49A3C tones

.btn-sm: stays at 28px height, same 0px radius.

Cards

.card {
  border-radius: var(--radius);   /* 4px */
  border: 1px solid var(--border);
  box-shadow: none;               /* flat */
  padding: var(--space-6);        /* 24px — tighter than current 32px */
}

.stat-card same treatment — 4px radius, no shadow.

Badges / chips

Update .badge and .status-pill:

.badge {
  border-radius: 2px;  /* nearly square */
  font-size: var(--text-xs);  /* 9px */
}

Add semantic chips for the review page:

.chip-uncertain { background: var(--warning-bg); color: var(--warning-fg); border: 1px solid var(--warning-border); }
.chip-unrouted  { background: var(--danger-bg);  color: var(--danger-fg);  border: 1px solid var(--danger-border); }
.chip-income    { background: var(--income-bg);  color: var(--income-fg);  border: 1px solid var(--income-border); }
.chip-expense   { background: var(--danger-bg);  color: var(--danger-fg);  border: 1px solid var(--danger-border); }

Update existing badge variants to use new semantic tokens:

• .badge-income → sage (--income-*)
• .badge-expense → blush (--danger-*)
• .badge-savings → amber (--savings-*)

Typography utilities

/* New utilities for information-dense layouts */
.label-sm {
  font-size: var(--text-xs);  /* 9px */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.text-muted { color: var(--muted); }
.text-income { color: var(--income); }
.text-expense { color: var(--danger); }
.text-warning { color: var(--warning-fg); }

/* Dense separator */
.separator {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-2) 0;
}

---

Acceptance Criteria

• Buttons are rectangular (0px radius), uppercase, 12px font, 32px height
• Button colours use cobalt/sage/blush/amber tokens correctly
• .btn-sm and .btn-icon updated consistently
• Cards: 4px radius, 1px border #DDD8D0, no box-shadow
• .stat-card on dashboard: 4px radius, no shadow
• .badge-income uses sage colours, .badge-expense uses blush colours
• .chip-uncertain (amber) and .chip-unrouted (blush) added
• .label-sm utility added (9px, uppercase, muted)
• .numeric includes font-feature-settings: "tnum"
• Mobile: buttons fall back to 44px min-height via responsive override
• No regressions on forms (inputs retain 44px tap target)

No files or tests are named. Start by locating the CSS definitions for the listed button, card, badge, chip, typography, token, and responsive selectors; verify the acceptance criteria across desktop and mobile, including that form inputs retain their 44px tap target.