feat(ui): view-by-view UX redesign and accessibility pass

- Overview: limits hero with progress states, spend pill, primary quick-add, mobile FAB
- Logbook: day-grouped entries with subtotals, unified filter bar, Log again,
  human source labels
- Trends: unified chart cards, tick thinning, chart aria summaries, radiogroup
  forecast control
- Settings: sectioned layout with separated danger zone, ThemePicker aria fix
- EntryModal: fieldset grouping, Field primitive, safe date validation
- AuthView: autoComplete, password visibility toggle
- StatHint popover replacing title-only tooltips; mobile stacked import preview
- Remaining inline hex styles converted to theme tokens

src/components/views/OverviewView.tsx

@@ -68,6 +68,12 @@ export function OverviewView({
     userLimits.dailySpendLimit != null
       ? `${currency.format(todaySpendRaw)} of ${currency.format(userLimits.dailySpendLimit)} today`
       : `${summary.monthSpend} this month`;
+  const chartTotalSpend = chartData.reduce((total, point) => total + point.spend, 0);
+  const chartTotalCans = chartData.reduce((total, point) => total + point.cans, 0);
+  const spendChartLabel = `Spend over the last ${chartData.length} logged days, total ${currency.format(chartTotalSpend)} across ${chartTotalCans} cans`;
+  const flavourChartLabel = flavourData.length
+    ? `Cans by flavour across ${flavourData.length} flavours. Most logged: ${flavourData[0].name}`
+    : "";
 
   return (
     <div className="grid gap-4">
@@ -84,7 +90,7 @@ export function OverviewView({
       {limitCheck.violations.length ? (
         <section className="limit-alert">
           <div className="flex items-start gap-3">
-            <AlertTriangle className="mt-0.5 shrink-0" size={20} aria-hidden="true" style={{ color: "#b06000" }} />
+            <AlertTriangle className="mt-0.5 shrink-0" size={20} aria-hidden="true" style={{ color: "var(--warning)" }} />
             <div>
               <p className="limit-alert-title">Limit alerts</p>
               <p className="limit-alert-copy mt-1">
@@ -111,7 +117,7 @@ export function OverviewView({
       <section className="overview-charts-grid grid gap-4">
         <AppCard title="Spend overview" subtitle="Last 30 logged days">
           {chartData.length ? (
-            <div className="chart-shell chart-shell--area">
+            <div className="chart-shell chart-shell--area" role="img" aria-label={spendChartLabel}>
             <ResponsiveContainer width="100%" height="100%">
               <AreaChart data={chartData} margin={{ top: 12, right: 12, bottom: 0, left: -18 }}>
                 <defs>
@@ -159,7 +165,7 @@ export function OverviewView({
       <section className="grid gap-4">
         <AppCard title="Flavour mix" subtitle="Cans by flavour">
           {flavourData.length ? (
-            <div className="chart-shell chart-shell--pie">
+            <div className="chart-shell chart-shell--pie" role="img" aria-label={flavourChartLabel}>
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
                 <Pie data={flavourData} dataKey="value" nameKey="name" innerRadius={70} outerRadius={104} paddingAngle={4} stroke="#080d1f" strokeWidth={4}>