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/app/globals.css

@@ -1,6 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap');
 @import "tailwindcss";
 
 :root {
+  /* Capsule Brand Colors */
+  --color-primary-blue: #1E73BE;
+  --color-finance-green: #28A745;
+  --color-cloud-blue: #A7D8F8;
+  --color-dark-navy: #0F2C4C;
+  --color-neutral-gray: #F4F4F4;
+  
+  /* Legacy variables for compatibility */
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -8,8 +17,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: "Roboto", sans-serif;
-  --font-mono: var(--font-geist-mono);
+  --font-mono: "Roboto Mono", monospace;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,7 +31,25 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Roboto", Arial, sans-serif;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 600;
+}
+
+.logo-text {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  color: var(--color-dark-navy);
+}
+
+.tagline {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  color: var(--color-finance-green);
 }
 
 /* Ensure form controls stay readable across light/dark modes */
@@ -32,6 +59,7 @@ textarea {
   color: #111827;
   background-color: #ffffff;
   border: 1px solid #d1d5db;
+  font-family: "Roboto", sans-serif;
 }
 
 input::placeholder,

src/app/page.tsx

@@ -406,8 +406,8 @@ export default function BudgetDashboard() {
     <div className="px-4 py-12 sm:px-6 lg:px-8">
       <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
         <div className="space-y-6">
-          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-700">Capsule</span>
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium" style={{ backgroundColor: 'rgba(30, 115, 190, 0.1)', color: 'var(--color-primary-blue)' }}>Capsule</span>
-          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight">
+          <h1 className="text-4xl sm:text-5xl font-bold leading-tight" style={{ color: 'var(--color-dark-navy)' }}>
             Take control of your money with smart envelopes
           </h1>
           <p className="text-lg text-gray-600 leading-relaxed">
@@ -416,44 +416,46 @@ export default function BudgetDashboard() {
           <div className="flex flex-col sm:flex-row gap-3">
             <button
               onClick={() => setShowAuthModal(true)}
-              className="inline-flex justify-center items-center px-5 py-3 rounded-lg bg-blue-600 text-white font-semibold shadow hover:bg-blue-700 transition-colors"
+              className="inline-flex justify-center items-center px-5 py-3 rounded-lg text-white font-semibold shadow hover:opacity-90 transition-opacity"
+              style={{ backgroundColor: 'var(--color-primary-blue)' }}
             >
               Get Started
             </button>
             <button
               onClick={() => setShowAuthModal(true)}
-              className="inline-flex justify-center items-center px-5 py-3 rounded-lg border border-gray-300 text-gray-700 font-semibold hover:border-gray-400 hover:text-gray-900 transition-colors"
+              className="inline-flex justify-center items-center px-5 py-3 rounded-lg border-2 font-semibold transition-colors"
+              style={{ borderColor: 'var(--color-primary-blue)', color: 'var(--color-primary-blue)' }}
             >
               Sign In
             </button>
           </div>
           <div className="flex items-center gap-4 text-sm text-gray-500">
             <div className="flex items-center gap-2">
-              <span className="w-2 h-2 bg-green-500 rounded-full" aria-hidden="true"></span>
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: 'var(--color-finance-green)' }} aria-hidden="true"></span>
               Auto-save & offline-ready data
             </div>
             <div className="flex items-center gap-2">
-              <span className="w-2 h-2 bg-indigo-500 rounded-full" aria-hidden="true"></span>
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: 'var(--color-primary-blue)' }} aria-hidden="true"></span>
               Guided setup wizard
             </div>
           </div>
         </div>
         <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100">
           <div className="grid grid-cols-1 gap-4">
-            <div className="p-4 rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200">
+            <div className="p-4 rounded-xl border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
-              <p className="text-sm text-blue-800 font-medium">Total Balance</p>
+              <p className="text-sm font-medium" style={{ color: 'var(--color-primary-blue)' }}>Total Balance</p>
-              <p className="text-3xl font-bold text-blue-900 mt-2">$0.00</p>
+              <p className="text-3xl font-bold mt-2" style={{ color: 'var(--color-dark-navy)' }}>$0.00</p>
-              <p className="text-xs text-blue-700 mt-1">Link accounts to see your starting balance</p>
+              <p className="text-xs mt-1" style={{ color: 'var(--color-primary-blue)' }}>Link accounts to see your starting balance</p>
             </div>
-            <div className="p-4 rounded-xl bg-gradient-to-br from-green-50 to-green-100 border border-green-200">
+            <div className="p-4 rounded-xl border" style={{ backgroundColor: 'rgba(40, 167, 69, 0.05)', borderColor: 'var(--color-finance-green)' }}>
-              <p className="text-sm text-green-800 font-medium">Envelopes</p>
+              <p className="text-sm font-medium" style={{ color: 'var(--color-finance-green)' }}>Envelopes</p>
-              <p className="text-3xl font-bold text-green-900 mt-2">Organize spending</p>
+              <p className="text-3xl font-bold mt-2" style={{ color: 'var(--color-dark-navy)' }}>Organize spending</p>
-              <p className="text-xs text-green-700 mt-1">Create categories with color-coded envelopes</p>
+              <p className="text-xs mt-1" style={{ color: 'var(--color-finance-green)' }}>Create categories with color-coded envelopes</p>
             </div>
-            <div className="p-4 rounded-xl bg-gradient-to-br from-indigo-50 to-indigo-100 border border-indigo-200">
+            <div className="p-4 rounded-xl border" style={{ backgroundColor: 'rgba(167, 216, 248, 0.1)', borderColor: 'var(--color-cloud-blue)' }}>
-              <p className="text-sm text-indigo-800 font-medium">Income Auto-Allocation</p>
+              <p className="text-sm font-medium" style={{ color: 'var(--color-primary-blue)' }}>Income Auto-Allocation</p>
-              <p className="text-3xl font-bold text-indigo-900 mt-2">Smart distribution</p>
+              <p className="text-3xl font-bold mt-2" style={{ color: 'var(--color-dark-navy)' }}>Smart distribution</p>
-              <p className="text-xs text-indigo-700 mt-1">Allocate paychecks by percentage or fixed amounts</p>
+              <p className="text-xs mt-1" style={{ color: 'var(--color-primary-blue)' }}>Allocate paychecks by percentage or fixed amounts</p>
             </div>
           </div>
         </div>
@@ -464,54 +466,81 @@ export default function BudgetDashboard() {
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Navigation */}
-      <nav className="bg-white shadow-sm border-b">
+      <nav className="bg-white shadow-sm border-b" style={{ borderBottomColor: 'var(--color-cloud-blue)' }}>
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16">
             <div className="flex">
               <div className="flex-shrink-0 flex items-center">
                 <div>
-                  <h1 className="text-xl font-bold text-gray-900">Capsule</h1>
+                  <h1 className="text-xl font-bold" style={{ color: 'var(--color-dark-navy)' }}>
-                  <p className="text-xs font-normal text-gray-500">by NeCloud</p>
+                    <span className="logo-text">Capsule</span>
+                  </h1>
+                  <p className="text-xs font-normal" style={{ color: 'var(--color-neutral-gray)' }}>by NeCloud</p>
                 </div>
               </div>
               <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                 <button
                   onClick={() => setCurrentView('dashboard')}
-                  className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                  className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
-                    currentView === 'dashboard' ? 'border-indigo-500 text-gray-900' : ''
+                    currentView === 'dashboard' 
+                      ? 'border-b-2 text-gray-900' 
+                      : 'text-gray-500 hover:text-gray-700'
                   }`}
+                  style={{
+                    borderBottomColor: currentView === 'dashboard' ? 'var(--color-primary-blue)' : 'transparent'
+                  }}
                 >
                   Dashboard
                 </button>
                 <button
                   onClick={() => setCurrentView('accounts')}
-                  className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                  className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
-                    currentView === 'accounts' ? 'border-indigo-500 text-gray-900' : ''
+                    currentView === 'accounts' 
+                      ? 'border-b-2 text-gray-900' 
+                      : 'text-gray-500 hover:text-gray-700'
                   }`}
+                  style={{
+                    borderBottomColor: currentView === 'accounts' ? 'var(--color-primary-blue)' : 'transparent'
+                  }}
                 >
                   Accounts
                 </button>
                 <button
                   onClick={() => setCurrentView('transactions')}
-                  className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                  className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
-                    currentView === 'transactions' ? 'border-indigo-500 text-gray-900' : ''
+                    currentView === 'transactions' 
+                      ? 'border-b-2 text-gray-900' 
+                      : 'text-gray-500 hover:text-gray-700'
                   }`}
+                  style={{
+                    borderBottomColor: currentView === 'transactions' ? 'var(--color-primary-blue)' : 'transparent'
+                  }}
                 >
                   Transactions
                 </button>
                 <button
                   onClick={() => setCurrentView('envelopes')}
-                  className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                  className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
-                    currentView === 'envelopes' ? 'border-indigo-500 text-gray-900' : ''
+                    currentView === 'envelopes' 
+                      ? 'border-b-2 text-gray-900' 
+                      : 'text-gray-500 hover:text-gray-700'
                   }`}
+                  style={{
+                    borderBottomColor: currentView === 'envelopes' ? 'var(--color-primary-blue)' : 'transparent'
+                  }}
                 >
                   Envelopes
                 </button>
                 <button
                   onClick={() => setCurrentView('settings')}
-                  className={`border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                  className={`border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors ${
-                    currentView === 'settings' ? 'border-indigo-500 text-gray-900' : ''
+                    currentView === 'settings' 
+                      ? 'border-b-2 text-gray-900' 
+                      : 'text-gray-500 hover:text-gray-700'
                   }`}
+                  style={{
+                    borderBottomColor: currentView === 'settings' ? 'var(--color-primary-blue)' : 'transparent'
+                  }}
                 >
                   Settings
                 </button>
@@ -521,7 +550,8 @@ export default function BudgetDashboard() {
               {user && setupCompleted && (
                 <button
                   onClick={() => setShowGetPaidModal(true)}
-                  className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm font-medium"
+                  className="text-white px-3 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"
+                  style={{ backgroundColor: 'var(--color-finance-green)' }}
                 >
                   💰 Get Paid
                 </button>
@@ -529,14 +559,16 @@ export default function BudgetDashboard() {
               {user ? (
                 <button
                   onClick={handleSignOut}
-                  className="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-md text-sm font-medium"
+                  className="text-white px-3 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"
+                  style={{ backgroundColor: '#DC2626' }}
                 >
                   Sign Out
                 </button>
               ) : (
                 <button
                   onClick={() => setShowAuthModal(true)}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm font-medium"
+                  className="text-white px-3 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"
+                  style={{ backgroundColor: 'var(--color-primary-blue)' }}
                 >
                   Sign In
                 </button>

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">
+        <div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(30, 115, 190, 0.05)', borderColor: 'var(--color-cloud-blue)' }}>
-          <h3 className="font-semibold text-blue-900 mb-3">🏦 Accounts</h3>
+          <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">
+        <div className="rounded-lg p-4 border" style={{ backgroundColor: 'rgba(40, 167, 69, 0.05)', borderColor: 'var(--color-finance-green)' }}>
-          <h3 className="font-semibold text-green-900 mb-3">📦 Envelopes</h3>
+          <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">
+            <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 text-blue-800">
+              <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>