feat: implement Capsule branding kit with custom colors and typography

- Add CSS variables for brand colors: Primary Blue (#1E73BE), Finance Green (#28A745), Cloud Blue (#A7D8F8), Dark Navy (#0F2C4C), Neutral Gray (#F4F4F4)
- Import Montserrat and Roboto fonts from Google Fonts
- Update navigation bar with brand colors (navy logo, blue active state, green Get Paid button)
- Update landing page hero section with brand color accents and button styling
- Update AuthModal, GetPaid, Settings, and DemoWizard components to use CSS variables
- Apply brand colors to info boxes and secondary UI elements
- Improve visual consistency across all app screens with cohesive color palette

src/components/GetPaid.tsx

@@ -251,7 +251,8 @@ export default function GetPaid({
       {!autoOpen && (
         <button
           onClick={() => setIsOpen(true)}
-          className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 flex items-center space-x-2"
+          className="text-white px-4 py-2 rounded-md hover:opacity-90 flex items-center space-x-2 transition-opacity"
+          style={{ backgroundColor: 'var(--color-finance-green)' }}
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
@@ -271,7 +272,7 @@ export default function GetPaid({
             <h3 className="text-xl font-bold text-gray-900 mb-4">Record Paycheck</h3>
 
             {savedTemplate && (
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
+              <div className="rounded-lg p-3 mb-4 border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
                 <div className="flex items-center justify-between">
                   <div>
                     <p className="text-sm font-medium text-gray-900">Saved Template Available</p>
@@ -282,7 +283,8 @@ export default function GetPaid({
                   <button
                     type="button"
                     onClick={applySavedTemplate}
-                    className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 whitespace-nowrap"
+                    className="px-3 py-1 text-sm text-white rounded hover:opacity-90 whitespace-nowrap transition-opacity"
+                    style={{ backgroundColor: 'var(--color-primary-blue)' }}
                   >
                     Use Template
                   </button>
@@ -344,7 +346,8 @@ export default function GetPaid({
                       <button
                         type="button"
                         onClick={handleSetDefaultAmount}
-                        className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
+                        className="px-3 py-1 text-sm text-white rounded hover:opacity-90 transition-opacity"
+                        style={{ backgroundColor: 'var(--color-primary-blue)' }}
                       >
                         Set
                       </button>
@@ -510,7 +513,8 @@ export default function GetPaid({
                 <button
                   type="submit"
                   disabled={!amount || !selectedAccountId || (accountEnvelopes.length > 0 && Math.abs(remaining) >= 0.01)}
-                  className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                  className="px-4 py-2 text-white rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+                  style={{ backgroundColor: 'var(--color-finance-green)' }}
                 >
                   Review & Confirm
                 </button>
@@ -526,7 +530,7 @@ export default function GetPaid({
             <h3 className="text-xl font-bold text-gray-900 mb-4">Confirm Paycheck Allocation</h3>
 
             <div className="mb-6">
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+              <div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
                 <div className="flex justify-between items-center">
                   <span className="text-sm font-medium text-gray-700">Paycheck Amount:</span>
                   <span className="text-2xl font-bold text-blue-600">${numericAmount.toFixed(2)}</span>
@@ -581,10 +585,10 @@ export default function GetPaid({
               })}
             </div>
 
-            <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+            <div className="rounded-lg p-4 mb-6 border" style={{ backgroundColor: 'rgba(40, 167, 69, 0.05)', borderColor: 'var(--color-finance-green)' }}>
               <div className="flex justify-between items-center">
                 <span className="font-semibold text-gray-900">Total Allocated:</span>
-                <span className="text-xl font-bold text-green-600">
+                <span className="text-xl font-bold" style={{ color: 'var(--color-finance-green)' }}>
                   ${Object.values(previewAllocations).reduce((sum, value) => sum + value, 0).toFixed(2)}
                 </span>
               </div>
@@ -631,7 +635,8 @@ export default function GetPaid({
                   const remainingAmount = numericAmount - totalAllocatedPreview;
                   return Math.abs(remainingAmount) >= 0.01;
                 })()}
-                className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                className="px-4 py-2 text-white rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+                style={{ backgroundColor: 'var(--color-finance-green)' }}
               >
                 Confirm & Apply Paycheck
               </button>