Polish dark theme: fix light remnants, KPI cards, backdrop blur, CTA buttons

index.html

@@ -6,7 +6,7 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Winbit - Webapp" />
-    <meta name="theme-color" content="#58b098" />
+    <meta name="theme-color" content="#65a7a5" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/App.jsx

@@ -37,7 +37,7 @@ export const App = () => {
   return (
     <ErrorBoundary>
       <AuthProvider>
-        <div className="min-h-screen flex flex-col bg-gray-50">
+        <div className="min-h-screen flex flex-col bg-dark-bg">
           <Suspense fallback={<PageFallback />}>
             <Routes>
               <Route path="/login" element={<LoginPage />} />

src/components/ErrorBoundary.jsx

@@ -17,17 +17,17 @@ export class ErrorBoundary extends Component {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
-          <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
-            <div className="text-red-500 text-6xl mb-4">⚠️</div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">Something went wrong</h1>
-            <p className="text-gray-600 mb-6">
+        <div className="min-h-screen flex items-center justify-center bg-dark-bg px-4">
+          <div className="max-w-md w-full bg-dark-card rounded-lg border border-border-dark p-8 text-center backdrop-blur-sm">
+            <div className="text-error text-6xl mb-4">⚠️</div>
+            <h1 className="text-2xl font-bold text-text-primary mb-2">Something went wrong</h1>
+            <p className="text-text-muted mb-6">
               We&apos;re sorry, but something unexpected happened. Please refresh the page to try
               again.
             </p>
             <button
               onClick={() => window.location.reload()}
-              className="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
+              className="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors"
             >
               Refresh Page
             </button>

src/components/features/dashboard/KpiCard.jsx

@@ -21,28 +21,28 @@ export const KpiCard = ({
 
   const cardClassName =
     resolvedTone === 'highlight'
-      ? 'bg-gradient-to-r from-[#58b098] to-[#4a9d84] text-white shadow-lg'
+      ? 'bg-gradient-to-r from-primary to-[#4a9d8e] text-white'
       : resolvedTone === 'neutral'
-        ? 'bg-gradient-to-r from-sky-50 to-sky-100 border border-sky-200 text-slate-900'
+        ? 'bg-[rgba(101,167,165,0.06)] border border-border-accent'
         : 'bg-dark-card';
 
   const titleClassName =
     resolvedTone === 'highlight'
       ? 'text-sm text-white/90'
       : resolvedTone === 'neutral'
-        ? 'text-sm text-sky-700'
+        ? 'text-sm text-text-muted'
         : 'text-sm text-text-muted';
 
   const valueClassName =
     resolvedTone === 'highlight'
       ? 'text-3xl font-bold text-white'
       : resolvedTone === 'neutral'
-        ? 'text-2xl font-semibold text-slate-900'
+        ? 'text-2xl font-semibold text-text-primary'
         : 'text-2xl font-semibold text-text-primary';
 
   return (
     <Card
-      className={`${cardClassName} transition-transform duration-200 ease-out hover:-translate-y-1 hover:shadow-lg`}
+      className={`${cardClassName} transition-transform duration-200 ease-out hover:-translate-y-0.5`}
     >
       <div className="space-y-2">
         <p className={titleClassName}>{title}</p>

src/components/features/deposits/DepositOptionCard.jsx

@@ -31,7 +31,7 @@ export const DepositOptionCard = ({ option }) => {
   const detailEntries = Object.entries(details).filter(([, v]) => v);
 
   return (
-    <Card className="hover:shadow-lg transition-shadow">
+    <Card className="transition-colors hover:border-border-accent">
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <h4 className="font-semibold text-text-primary">{option.label}</h4>

src/components/features/wallets/WalletCard.jsx

@@ -19,13 +19,15 @@ export const WalletCard = ({ network, address, icon }) => {
   };
 
   return (
-    <Card className="hover:shadow-lg transition-shadow">
+    <Card>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           {icon && <span className="text-2xl">{icon}</span>}
           <div>
-            <h4 className="font-semibold text-gray-900">{network}</h4>
-            <p className="text-sm text-gray-600 font-mono mt-1">{truncateAddress(address, 8, 6)}</p>
+            <h4 className="font-semibold text-text-primary">{network}</h4>
+            <p className="text-sm text-text-muted font-mono mt-1">
+              {truncateAddress(address, 8, 6)}
+            </p>
           </div>
         </div>
 

src/components/ui/Button.jsx

@@ -7,15 +7,15 @@ export const Button = ({
   className = '',
 }) => {
   const baseStyles =
-    'px-6 py-3 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg disabled:opacity-50 disabled:cursor-not-allowed';
+    'px-6 py-3 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg disabled:opacity-50 disabled:cursor-not-allowed';
 
   const variants = {
     primary: 'bg-primary text-white hover:bg-primary/80 focus:ring-primary',
     secondary:
-      'bg-dark-section text-text-primary border border-border-dark hover:bg-accent-dim focus:ring-primary',
+      'bg-accent-dim text-white border border-[rgba(101,167,165,0.45)] hover:bg-accent-glow hover:border-primary focus:ring-primary',
     danger: 'bg-error text-white hover:bg-error/80 focus:ring-error',
     outline:
-      'border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary',
+      'border border-[rgba(101,167,165,0.45)] text-primary bg-accent-dim hover:bg-accent-glow hover:border-primary focus:ring-primary',
   };
 
   return (

src/components/ui/Button.test.jsx

@@ -24,7 +24,7 @@ describe('Button', () => {
   it('applies secondary variant styles', () => {
     render(<Button variant="secondary">Secondary</Button>);
     const button = screen.getByText('Secondary');
-    expect(button).toHaveClass('bg-dark-section');
+    expect(button).toHaveClass('bg-accent-dim');
   });
 
   it('applies danger variant styles', () => {
@@ -36,7 +36,7 @@ describe('Button', () => {
   it('applies outline variant styles', () => {
     render(<Button variant="outline">Outline</Button>);
     const button = screen.getByText('Outline');
-    expect(button).toHaveClass('border-2');
+    expect(button).toHaveClass('bg-accent-dim');
   });
 
   it('disables button when disabled prop is true', () => {

src/components/ui/Card.jsx

@@ -1,6 +1,8 @@
 export const Card = ({ children, className = '', title }) => {
   return (
-    <div className={`bg-dark-card rounded-lg border border-border-dark p-6 ${className}`}>
+    <div
+      className={`bg-dark-card rounded-lg border border-border-dark p-6 backdrop-blur-sm ${className}`}
+    >
       {title && <h3 className="text-xl font-semibold mb-4 text-text-primary">{title}</h3>}
       {children}
     </div>

src/components/ui/ConfirmModal.jsx

@@ -29,7 +29,7 @@ export const ConfirmModal = ({
       <div className="absolute inset-0 bg-black/70 transition-opacity" onClick={onCancel} />
 
       <div
-        className="relative w-full max-w-sm rounded-2xl border-2 border-[rgba(255,152,0,0.3)] bg-[rgba(255,152,0,0.15)] p-8"
+        className="relative w-full max-w-sm rounded-lg border-2 border-[rgba(255,152,0,0.3)] bg-[rgba(255,152,0,0.15)] p-8 backdrop-blur-md"
         role="dialog"
         aria-modal="true"
         aria-labelledby="confirm-modal-title"

src/components/ui/Modal.jsx

@@ -38,7 +38,7 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {
       <div className="absolute inset-0 bg-black/70 transition-opacity" onClick={onClose} />
 
       <div
-        className={`relative w-full max-w-sm rounded-2xl border-2 p-8 ${bgColorClass}`}
+        className={`relative w-full max-w-sm rounded-lg border-2 p-8 backdrop-blur-md ${bgColorClass}`}
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"

src/components/ui/Toast.jsx

@@ -10,21 +10,21 @@ export const Toast = ({ title, message, type = 'success', onClose, duration = 30
   }, [duration, onClose]);
 
   const types = {
-    success: 'bg-green-500',
-    error: 'bg-red-500',
-    info: 'bg-blue-500',
+    success: 'bg-success',
+    error: 'bg-error',
+    info: 'bg-primary',
   };
 
   return (
     <div className="fixed top-4 right-4 z-50 animate-slide-in">
       <div
-        className={`${types[type]} text-white px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px]`}
+        className={`${types[type]} text-white px-6 py-4 rounded-lg flex items-center gap-3 min-w-[300px]`}
       >
         <div className="flex-1">
           {title && <div className="font-semibold">{title}</div>}
           <div className={title ? 'text-sm opacity-95 mt-0.5' : ''}>{message}</div>
         </div>
-        <button onClick={onClose} className="text-white hover:text-gray-200 transition-colors">
+        <button onClick={onClose} className="text-white/80 hover:text-white transition-colors">
           ✕
         </button>
       </div>

src/components/ui/Toast.test.jsx

@@ -18,13 +18,13 @@ describe('Toast', () => {
     const { rerender, container } = render(
       <Toast message="Ok" type="success" onClose={() => {}} />,
     );
-    expect(container.querySelector('.bg-green-500')).toBeInTheDocument();
+    expect(container.querySelector('.bg-success')).toBeInTheDocument();
 
     rerender(<Toast message="Err" type="error" onClose={() => {}} />);
-    expect(container.querySelector('.bg-red-500')).toBeInTheDocument();
+    expect(container.querySelector('.bg-error')).toBeInTheDocument();
 
     rerender(<Toast message="Info" type="info" onClose={() => {}} />);
-    expect(container.querySelector('.bg-blue-500')).toBeInTheDocument();
+    expect(container.querySelector('.bg-primary')).toBeInTheDocument();
   });
 
   it('calls onClose when close button is clicked', () => {

src/index.css

@@ -11,6 +11,8 @@
       -apple-system,
       BlinkMacSystemFont,
       sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
   }
 
   input,
@@ -19,7 +21,7 @@
     background: rgba(20, 20, 20, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 0.5rem;
-    padding: 0.625rem 1rem;
+    padding: 0.75rem 1rem;
     color: #e8e8e8;
     font-family:
       'Montserrat',

src/pages/ChangePasswordPage.jsx

@@ -49,21 +49,23 @@ export const ChangePasswordPage = () => {
 
   return (
     <div className="max-w-lg mx-auto">
-      <h1 className="text-2xl font-bold text-gray-900 mb-2">{t('auth.changePassword.title')}</h1>
-      <p className="text-sm text-gray-600 mb-6">{t('auth.changePassword.subtitle')}</p>
+      <h1 className="text-2xl font-bold text-text-primary mb-2">
+        {t('auth.changePassword.title')}
+      </h1>
+      <p className="text-sm text-text-muted mb-6">{t('auth.changePassword.subtitle')}</p>
 
       {!isEmailUser && (
-        <div className="p-4 bg-amber-50 text-amber-800 rounded-lg text-sm mb-6">
+        <div className="p-4 bg-[rgba(255,152,0,0.15)] text-warning rounded-lg text-sm mb-6">
           {t('auth.changePassword.googleInfo')}
         </div>
       )}
 
-      <div className="bg-white rounded-xl shadow p-6">
+      <div className="bg-dark-card rounded-lg border border-border-dark p-6 backdrop-blur-sm">
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label
               htmlFor="current-password"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-text-primary mb-1"
             >
               {t('auth.changePassword.current')}
             </label>
@@ -73,13 +75,16 @@ export const ChangePasswordPage = () => {
               required
               value={currentPassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              className="w-full rounded-lg border border-border-dark bg-dark-section px-4 py-3 text-sm text-text-primary placeholder:text-text-dim focus:border-border-accent focus:ring-2 focus:ring-accent-dim outline-none"
               autoComplete="current-password"
             />
           </div>
 
           <div>
-            <label htmlFor="new-password" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="new-password"
+              className="block text-sm font-medium text-text-primary mb-1"
+            >
               {t('auth.changePassword.new')}
             </label>
             <input
@@ -88,7 +93,7 @@ export const ChangePasswordPage = () => {
               required
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              className="w-full rounded-lg border border-border-dark bg-dark-section px-4 py-3 text-sm text-text-primary placeholder:text-text-dim focus:border-border-accent focus:ring-2 focus:ring-accent-dim outline-none"
               minLength={6}
               autoComplete="new-password"
             />
@@ -97,7 +102,7 @@ export const ChangePasswordPage = () => {
           <div>
             <label
               htmlFor="confirm-password"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-text-primary mb-1"
             >
               {t('auth.changePassword.confirm')}
             </label>
@@ -107,16 +112,20 @@ export const ChangePasswordPage = () => {
               required
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              className="w-full rounded-lg border border-border-dark bg-dark-section px-4 py-3 text-sm text-text-primary placeholder:text-text-dim focus:border-border-accent focus:ring-2 focus:ring-accent-dim outline-none"
               minLength={6}
               autoComplete="new-password"
             />
           </div>
 
-          {error && <div className="p-3 bg-red-50 text-red-800 rounded-lg text-sm">{error}</div>}
+          {error && (
+            <div className="p-3 bg-[rgba(239,83,80,0.15)] text-error rounded-lg text-sm">
+              {error}
+            </div>
+          )}
 
           {success && (
-            <div className="p-3 bg-green-50 text-green-800 rounded-lg text-sm">
+            <div className="p-3 bg-[rgba(76,175,80,0.15)] text-success rounded-lg text-sm">
               {t('auth.changePassword.success')}
             </div>
           )}

src/pages/HistoryPage.jsx

@@ -411,7 +411,7 @@ export const HistoryPage = () => {
             {mobileVisibleRows.map((row, idx) => (
               <div
                 key={`${row.code}-${row.date}-${idx}`}
-                className="bg-dark-card rounded-xl border border-border-dark p-4"
+                className="bg-dark-card rounded-lg border border-border-dark p-4"
               >
                 <div className="flex items-start justify-between gap-3 mb-1">
                   <div className="min-w-0">
@@ -508,7 +508,7 @@ export const HistoryPage = () => {
           {/* Desktop table */}
           <div
             data-testid="history-desktop"
-            className="hidden md:block overflow-hidden bg-dark-card rounded-xl border border-border-dark"
+            className="hidden md:block overflow-hidden bg-dark-card rounded-lg border border-border-dark"
           >
             <div className="overflow-x-auto">
               <table className="min-w-full divide-y divide-border-dark">

src/pages/LoginPage.jsx

@@ -78,7 +78,7 @@ export const LoginPage = () => {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-dark-bg px-4">
-      <div className="max-w-md w-full bg-dark-card rounded-2xl border border-border-dark p-8">
+      <div className="max-w-md w-full bg-dark-card rounded-lg border border-border-dark p-8 backdrop-blur-sm">
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold text-primary mb-2">Winbit</h1>
           <p className="text-text-muted">{t('auth.login.subtitle')}</p>

src/pages/OperatingPage.jsx

@@ -131,7 +131,7 @@ export const OperatingPage = () => {
             {mobileVisibleRows.map((row, idx) => (
               <div
                 key={`${row.code}-${row.date}-${idx}`}
-                className="bg-dark-card rounded-xl border border-border-dark p-4"
+                className="bg-dark-card rounded-lg border border-border-dark p-4"
               >
                 <div className="flex items-start justify-between gap-3 mb-1">
                   <div className="min-w-0">
@@ -216,7 +216,7 @@ export const OperatingPage = () => {
           {/* Desktop table */}
           <div
             data-testid="operating-desktop"
-            className="hidden md:block overflow-hidden bg-dark-card rounded-xl border border-border-dark"
+            className="hidden md:block overflow-hidden bg-dark-card rounded-lg border border-border-dark"
           >
             <div className="overflow-x-auto">
               <table className="min-w-full divide-y divide-border-dark">

src/pages/RequestsPage.jsx

@@ -96,7 +96,7 @@ export const RequestsPage = () => {
               <Spinner size="lg" />
             </div>
           ) : withdrawals.length === 0 ? (
-            <div className="rounded-xl border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
+            <div className="rounded-lg border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
               No hay retiros registrados aún.
             </div>
           ) : (
@@ -107,7 +107,7 @@ export const RequestsPage = () => {
                   return (
                     <div
                       key={r.id}
-                      className="rounded-xl border border-border-dark bg-dark-card p-4"
+                      className="rounded-lg border border-border-dark bg-dark-card p-4"
                     >
                       <div className="flex items-start justify-between gap-3">
                         <div>
@@ -130,7 +130,7 @@ export const RequestsPage = () => {
                 })}
               </div>
 
-              <div className="hidden overflow-x-auto rounded-xl border border-border-dark bg-dark-card md:block">
+              <div className="hidden overflow-x-auto rounded-lg border border-border-dark bg-dark-card md:block">
                 <table className="min-w-full divide-y divide-border-dark text-sm">
                   <thead className="bg-dark-section">
                     <tr>