feat: add responsive typography scaling for desktop readability

- Add CSS clamp() for fluid font-size scaling (16px to 20px based on viewport)
- Apply responsive breakpoint classes to all components:
  * text-xs → lg:text-sm xl:text-base
  * text-sm → lg:text-base xl:text-lg
  * text-base → lg:text-lg xl:text-xl
  * text-lg → lg:text-xl xl:text-2xl
  * text-xl → lg:text-2xl xl:text-3xl
  * text-2xl → lg:text-3xl xl:text-4xl
  * text-3xl → lg:text-4xl xl:text-5xl
- Apply responsive padding/spacing scaling proportionally
- Updated 27 component and page files
- Build verified: 6 routes, zero TypeScript errors
- Fixes readability on MacBook Pro 14" and other desktop screens without browser zoom

frontend/components/ConfirmationModal.tsx

@@ -57,12 +57,12 @@ export default function ConfirmationModal({
     <div data-testid="confirmation-modal" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
       <div className="bg-surface border border-slate-800 rounded-lg shadow-xl max-w-sm w-full mx-4">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-slate-800">
+        <div className="flex items-center justify-between p-6 lg:p-8 xl:p-10 border-b border-slate-800">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-rose-500/10 rounded-lg text-rose-500">
+            <div className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-rose-500/10 rounded-lg text-rose-500">
               <AlertTriangle size={20} />
             </div>
-            <h2 className="text-lg font-black text-white">{title}</h2>
+            <h2 className="text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black text-white">{title}</h2>
           </div>
           <button
             onClick={onCancel}
@@ -75,29 +75,29 @@ export default function ConfirmationModal({
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-4">
+        <div className="p-6 lg:p-8 xl:p-10 space-y-4">
           {/* Description */}
-          <p className="text-sm text-secondary">{description}</p>
+          <p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-secondary">{description}</p>
 
           {/* Item Name (if provided) */}
           {itemName && (
-            <div className="bg-slate-800/40 border border-slate-800 rounded p-3">
-              <p className="text-xs text-muted font-semibold">Item</p>
-              <p className="text-sm font-mono text-white mt-1">{itemName}</p>
+            <div className="bg-slate-800/40 border border-slate-800 rounded p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8">
+              <p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-muted font-semibold">Item</p>
+              <p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-mono text-white mt-1">{itemName}</p>
             </div>
           )}
 
           {/* Consequence Warning */}
           {consequence && (
-            <div className="flex gap-2 p-3 bg-rose-500/5 border border-rose-500/20 rounded">
+            <div className="flex gap-2 p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 bg-rose-500/5 border border-rose-500/20 rounded">
               <span className="text-rose-500 flex-shrink-0">⚠</span>
-              <p className="text-sm text-rose-400">{consequence}</p>
+              <p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-rose-400">{consequence}</p>
             </div>
           )}
 
           {/* Affected Items Count (for medium-risk+) */}
           {affectedCount && affectedCount > 0 && (
-            <div className="text-sm text-secondary">
+            <div className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-secondary">
               {affectedCount === 1
                 ? 'This will affect 1 item.'
                 : `This will affect ${affectedCount} items.`}
@@ -107,7 +107,7 @@ export default function ConfirmationModal({
           {/* High-Risk Warning & Confirmation Input */}
           {requiresTextConfirm && (
             <div className="space-y-3 pt-2 border-t border-slate-800">
-              <p className="text-sm font-semibold text-rose-400">
+              <p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-semibold text-rose-400">
                 Type "DELETE" to confirm this high-risk action
               </p>
               <input
@@ -118,7 +118,7 @@ export default function ConfirmationModal({
                   setError(null);
                 }}
                 placeholder="Type DELETE"
-                className="w-full px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
+                className="w-full px-3 lg:px-4 xl:px-5 py-2 lg:py-3 xl:py-4.5 bg-slate-800 border border-slate-700 rounded text-white placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
                 disabled={loading}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && canConfirm && !loading) {
@@ -127,18 +127,18 @@ export default function ConfirmationModal({
                 }}
               />
               {error && (
-                <p className="text-xs text-rose-500">{error}</p>
+                <p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-rose-500">{error}</p>
               )}
             </div>
           )}
         </div>
 
         {/* Actions */}
-        <div className="flex gap-2 p-6 border-t border-slate-800">
+        <div className="flex gap-2 p-6 lg:p-8 xl:p-10 border-t border-slate-800">
           <button
             onClick={onCancel}
             disabled={loading}
-            className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none"
+            className="flex-1 px-4 lg:px-5 xl:px-6 py-2 lg:py-3 xl:py-4.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none"
           >
             Cancel
           </button>
@@ -146,7 +146,7 @@ export default function ConfirmationModal({
             onClick={handleConfirm}
             data-testid="confirm-action"
             disabled={loading || !canConfirm}
-            className="flex-1 px-4 py-2.5 bg-rose-600 text-white rounded font-semibold hover:bg-rose-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-rose-600 focus:outline-none"
+            className="flex-1 px-4 lg:px-5 xl:px-6 py-2 lg:py-3 xl:py-4.5 bg-rose-600 text-white rounded font-semibold hover:bg-rose-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-rose-600 focus:outline-none"
           >
             {loading ? (
               <>