/** * Theme Presets CSS * * Define todas las variables --brand-* para cada preset. * Se aplica la clase .theme-{preset} al para activar los colores. * * FUENTE ÚNICA: Si necesitas cambiar colores, hazlo aquí. * BrandingContext.tsx debe mantenerse sincronizado con estos valores. */ /* ===== DEFAULT (TailAdmin blue) ===== */ :root { --brand-25: #f2f7ff; --brand-50: #ecf3ff; --brand-100: #dde9ff; --brand-200: #c2d6ff; --brand-300: #9cb9ff; --brand-400: #7592ff; --brand-500: #465fff; --brand-600: #3641f5; --brand-700: #2a31d8; --brand-800: #252dae; --brand-900: #262e89; --brand-950: #161950; } /* ===== VIOLET ===== */ :root.theme-violet { --brand-25: #faf5ff; --brand-50: #f3e8ff; --brand-100: #e9d5ff; --brand-200: #d8b4fe; --brand-300: #c084fc; --brand-400: #a855f7; --brand-500: #8B5CF6; --brand-600: #7c3aed; --brand-700: #6d28d9; --brand-800: #5b21b6; --brand-900: #4c1d95; --brand-950: #2e1065; } /* ===== BLUE ===== */ :root.theme-blue { --brand-25: #f0f9ff; --brand-50: #e0f2fe; --brand-100: #bae6fd; --brand-200: #7dd3fc; --brand-300: #38bdf8; --brand-400: #0ea5e9; --brand-500: #3B82F6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; --brand-950: #172554; } /* ===== GREEN ===== */ :root.theme-green { --brand-25: #f0fdf4; --brand-50: #dcfce7; --brand-100: #bbf7d0; --brand-200: #86efac; --brand-300: #4ade80; --brand-400: #22c55e; --brand-500: #10B981; --brand-600: #059669; --brand-700: #047857; --brand-800: #065f46; --brand-900: #064e3b; --brand-950: #022c22; } /* ===== ORANGE ===== */ :root.theme-orange { --brand-25: #fff7ed; --brand-50: #ffedd5; --brand-100: #fed7aa; --brand-200: #fdba74; --brand-300: #fb923c; --brand-400: #f97316; --brand-500: #F97316; --brand-600: #ea580c; --brand-700: #c2410c; --brand-800: #9a3412; --brand-900: #7c2d12; --brand-950: #431407; } /* ===== RED ===== */ :root.theme-red { --brand-25: #fef2f2; --brand-50: #fee2e2; --brand-100: #fecaca; --brand-200: #fca5a5; --brand-300: #f87171; --brand-400: #ef4444; --brand-500: #EF4444; --brand-600: #dc2626; --brand-700: #b91c1c; --brand-800: #991b1b; --brand-900: #7f1d1d; --brand-950: #450a0a; } /* ===== ROSE ===== */ :root.theme-rose { --brand-25: #fff1f2; --brand-50: #ffe4e6; --brand-100: #fecdd3; --brand-200: #fda4af; --brand-300: #fb7185; --brand-400: #f43f5e; --brand-500: #EC4899; --brand-600: #db2777; --brand-700: #be185d; --brand-800: #9d174d; --brand-900: #831843; --brand-950: #500724; }