/* ========================================================================== THEMES - Color Schemes, Dark Mode ========================================================================== */ /* Background Colors ========================================================================== */ .bg-white { background-color: white; } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-900 { background-color: var(--color-gray-900); } .bg-primary { background-color: var(--color-primary); } .bg-primary-light { background-color: var(--color-primary-light); } .bg-secondary { background-color: var(--color-secondary); } .bg-success { background-color: var(--color-success); } .bg-warning { background-color: var(--color-warning); } .bg-error { background-color: var(--color-error); } .bg-accent { background-color: var(--color-accent); } /* Gradient Backgrounds */ .bg-gradient-primary { background: var(--gradient-primary); } .bg-gradient-secondary { background: var(--gradient-secondary); } .bg-gradient-accent { background: var(--gradient-accent); } /* Text Colors ========================================================================== */ .text-white { color: white; } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-900 { color: var(--color-gray-900); } .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } /* Border Colors ========================================================================== */ .border { border: 1px solid var(--color-gray-200); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-primary { border-color: var(--color-primary); } .border-t { border-top: 1px solid var(--color-gray-200); } .border-b { border-bottom: 1px solid var(--color-gray-200); } .border-l { border-left: 1px solid var(--color-gray-200); } .border-r { border-right: 1px solid var(--color-gray-200); } /* Border Radius ========================================================================== */ .rounded { border-radius: var(--radius-base); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } /* Shadows ========================================================================== */ .shadow-none { box-shadow: none; } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow-base); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } /* Dark Mode Support (Optional) ========================================================================== */ @media (prefers-color-scheme: dark) { .dark-mode-auto { /* Apply dark mode styles when system prefers dark */ } } /* Manual Dark Mode Toggle Usage: Add .dark-mode class to ========================================================================== */ .dark-mode { --color-gray-50: #18181b; --color-gray-100: #27272a; --color-gray-200: #3f3f46; --color-gray-300: #52525b; --color-gray-400: #71717a; --color-gray-500: #a1a1aa; --color-gray-600: #d4d4d8; --color-gray-700: #e4e4e7; --color-gray-800: #f4f4f5; --color-gray-900: #fafafa; } .dark-mode body { background-color: var(--color-gray-50); color: var(--color-gray-900); } .dark-mode .card, .dark-mode .modal, .dark-mode .page-header { background-color: var(--color-gray-100); border-color: var(--color-gray-300); } .dark-mode .form-input, .dark-mode .form-select, .dark-mode .form-textarea { background-color: var(--color-gray-200); border-color: var(--color-gray-400); color: var(--color-gray-900); } .dark-mode .table { background-color: var(--color-gray-100); } .dark-mode .table thead { background-color: var(--color-gray-200); } .dark-mode .table td { border-color: var(--color-gray-300); } /* Page-Specific Themes ========================================================================== */ /* Auth Pages (Signup, Login) */ .auth-page { background: white; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .auth-card { background: white; padding: var(--space-8); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 450px; width: 100%; } /* Dashboard Theme */ .dashboard-page { background-color: var(--color-gray-50); } .stat-card { background: white; padding: var(--space-5); border-radius: var(--radius-lg); border-left: 4px solid var(--color-primary); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-gray-900); margin-bottom: var(--space-2); } .stat-label { font-size: var(--font-size-sm); color: var(--color-gray-600); text-transform: uppercase; letter-spacing: 0.05em; } /* Status Colors for Product States ========================================================================== */ .status-draft { background-color: var(--color-gray-100); color: var(--color-gray-700); } .status-pending { background-color: #fef3c7; color: #92400e; } .status-approved { background-color: #dbeafe; color: #1e40af; } .status-published { background-color: var(--color-success-light); color: var(--color-success-dark); } .status-rejected { background-color: #fee2e2; color: #991b1b; } /* Subscription Plan Badges ========================================================================== */ .plan-starter { background: linear-gradient(135deg, #4f46e5 0%, #5526a6 100%); color: white; box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.25); } .plan-pro { background: linear-gradient(135deg, #5526a6 0%, #ec4899 100%); color: white; box-shadow: 0 4px 14px 0 rgba(85, 38, 166, 0.35); } .plan-enterprise { background: linear-gradient(135deg, #ec4899 0%, #f97316 100%); color: white; box-shadow: 0 4px 14px 0 rgba(236, 72, 153, 0.35); }