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/AuthModal.tsx

@@ -120,7 +120,8 @@ export default function AuthModal({ isOpen, onClose, onAuthSuccess }: AuthModalP
           <button
             type="submit"
             disabled={loading}
-            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+            className="w-full text-white py-2 px-4 rounded-md hover:opacity-90 focus:outline-none focus:ring-2 disabled:opacity-50 transition-opacity"
+            style={{ backgroundColor: 'var(--color-primary-blue)' }}
           >
             {loading ? 'Please wait...' : (isLogin ? 'Sign In' : 'Create Account')}
           </button>

src/components/DemoWizard.tsx

@@ -86,7 +86,8 @@ export default function DemoWizard({ onApplyDemo, onSkip, accountId }: DemoWizar
         <div className="flex gap-3 justify-center pt-4">
           <button
             onClick={() => setShowDemo(true)}
-            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
+            className="text-white px-6 py-3 rounded-lg hover:opacity-90 transition-opacity"
+            style={{ backgroundColor: 'var(--color-primary-blue)' }}
           >
             Show Me Demo Data
           </button>
@@ -111,25 +112,25 @@ export default function DemoWizard({ onApplyDemo, onSkip, accountId }: DemoWizar
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
-          <h3 className="font-semibold text-blue-900 mb-3">🏦 Accounts</h3>
+        <div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
+          <h3 className="font-semibold mb-3" style={{ color: 'var(--color-primary-blue)' }}>🏦 Accounts</h3>
           <ul className="space-y-2">
             {DEMO_DATA.accounts.map((acc) => (
-              <li key={acc.name} className="text-sm text-blue-800">
+              <li key={acc.name} className="text-sm text-gray-700">
                 <span className="font-medium">{acc.name}</span> - ${acc.balance.toLocaleString()}
               </li>
             ))}
           </ul>
         </div>
 
-        <div className="bg-green-50 rounded-lg p-4 border border-green-200">
-          <h3 className="font-semibold text-green-900 mb-3">📦 Envelopes</h3>
+        <div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(40, 167, 69, 0.05)', borderColor: 'var(--color-finance-green)' }}>
+          <h3 className="font-semibold mb-3" style={{ color: 'var(--color-finance-green)' }}>📦 Envelopes</h3>
           <ul className="space-y-2">
             {DEMO_DATA.envelopes.map((env) => (
-              <li key={env.name} className="text-sm text-green-800">
+              <li key={env.name} className="text-sm text-gray-700">
                 <span className="font-medium">{env.name}</span> - ${env.allocated}/mo
                 {env.isRecurring && (
-                  <span className="ml-2 text-xs bg-green-200 px-2 py-1 rounded">Recurring</span>
+                  <span className="ml-2 text-xs px-2 py-1 rounded" style={{ backgroundColor: 'var(--color-finance-green)', color: 'white' }}>Recurring</span>
                 )}
               </li>
             ))}
@@ -152,7 +153,8 @@ export default function DemoWizard({ onApplyDemo, onSkip, accountId }: DemoWizar
         </button>
         <button
           onClick={handleApplyDemo}
-          className="flex-1 bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 transition-colors font-semibold"
+          className="flex-1 text-white py-3 px-4 rounded-lg hover:opacity-90 transition-opacity font-semibold"
+          style={{ backgroundColor: 'var(--color-finance-green)' }}
         >
           Apply Demo Data →
         </button>

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>

src/components/Settings.tsx

@@ -257,7 +257,8 @@ export default function Settings({ user, onAccountDeleted }: SettingsProps) {
             <button
               type="submit"
               disabled={loading || !resetCode || !newPassword}
-              className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
+              className="w-full text-white py-2 px-4 rounded-md hover:opacity-90 disabled:opacity-50 transition-opacity"
+              style={{ backgroundColor: 'var(--color-primary-blue)' }}
             >
               {loading ? 'Resetting...' : 'Reset Password'}
             </button>
@@ -277,21 +278,23 @@ export default function Settings({ user, onAccountDeleted }: SettingsProps) {
             <div className="space-y-3">
               <button
                 onClick={() => handleExportData('json')}
-                className="w-full bg-green-600 text-white py-3 px-4 rounded-md hover:bg-green-700 transition-colors text-left flex justify-between items-center"
+                className="w-full text-white py-3 px-4 rounded-md hover:opacity-90 transition-opacity text-left flex justify-between items-center"
+                style={{ backgroundColor: 'var(--color-finance-green)' }}
               >
                 <span>📋 Export as JSON (Full Backup)</span>
                 <span className="text-sm">Recommended</span>
               </button>
               <button
                 onClick={() => handleExportData('csv')}
-                className="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition-colors text-left"
+                className="w-full text-white py-3 px-4 rounded-md hover:opacity-90 transition-opacity text-left"
+                style={{ backgroundColor: 'var(--color-primary-blue)' }}
               >
                 📊 Export Transactions as CSV
               </button>
             </div>
 
-            <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-md">
-              <p className="text-sm text-blue-800">
+            <div className="mt-6 p-4 rounded-md border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
+              <p className="text-sm" style={{ color: 'var(--color-primary-blue)' }}>
                 <strong>💡 Tip:</strong> Regularly export your data as a backup. You can import it later if needed.
               </p>
             </div>