@import "tailwindcss"; @plugin "tailwind-scrollbar"; @source "../components/*.{js,ts,jsx,tsx}"; @source "../components/ui/*.{js,ts,jsx,tsx}"; @source "*.{js,ts,jsx,tsx}"; @custom-variant hover (&:hover); @theme { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /* Custom animations */ --animate-gradient: gradient 8s linear infinite; --animate-float: float 3s ease-in-out infinite; --animate-glow: glow 2s ease-in-out infinite alternate; --animate-fade-in: fadeIn 0.3s ease-in-out; --animate-slide-up: slideUp 0.4s ease-out; --animate-slide-down: slideDown 0.4s ease-out; --animate-scale-in: scaleIn 0.2s ease-out; @keyframes gradient { 0%, 100% { background-size: 200% 200%; background-position: left center; } 50% { background-size: 200% 200%; background-position: right center; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes glow { from { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } to { box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 40px rgba(139, 92, 246, 0.3); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } } :root { /* CORPORATE DARK THEME (The Standard) */ --background: #0a0a0f; --foreground: #ffffff; --card: rgba(255, 255, 255, 0.03); --card-foreground: #ffffff; --popover: #5D429C; --popover-foreground: #ffffff; --primary: #8b5cf6; --primary-foreground: #ffffff; --secondary: rgba(255, 255, 255, 0.05); --secondary-foreground: #ffffff; --muted: rgba(255, 255, 255, 0.05); --muted-foreground: #a1a1aa; --accent: rgba(255, 255, 255, 0.08); --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: rgba(255, 255, 255, 0.15); --input: rgba(255, 255, 255, 0.05); --ring: rgba(139, 92, 246, 0.5); --radius: 1rem; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent hover:scrollbar-thumb-primary/40; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fix native select dropdown styling */ select option { @apply bg-popover text-popover-foreground; } } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @utility text-balance { text-wrap: balance; } @utility glass { background: var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); } @utility gradient-purple-blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } @utility gradient-cyan-purple { background: linear-gradient(135deg, #2dd4bf 0%, #8b5cf6 100%); } @utility gradient-indigo-purple { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); } @utility gradient-yellow-amber { background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%); } @utility gradient-green-teal { background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); } @utility gradient-blue-cyan { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); } @utility gradient-brand { background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee); }