78 lines
2.0 KiB
CSS
78 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
|
|
--color-border: var(--border);
|
|
|
|
--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-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
|
|
--color-sidebar: var(--sidebar);
|
|
|
|
--font-sans: var(--font-inter);
|
|
--font-mono: var(--font-inter);
|
|
|
|
/* Micro-animations */
|
|
--animate-fade-in: fade-in 0.5s ease-out forwards;
|
|
--animate-slide-up: slide-up 0.5s ease-out forwards;
|
|
|
|
@keyframes fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
0% { opacity: 0; transform: translateY(20px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
}
|
|
|
|
:root {
|
|
/* Premium Dark Theme */
|
|
--background: #09090b; /* Very dark zinc */
|
|
--foreground: #fafafa;
|
|
|
|
--card: rgba(24, 24, 27, 0.7); /* Zinc 900 with transparency for glassmorphism */
|
|
--card-foreground: #fafafa;
|
|
|
|
--border: rgba(255, 255, 255, 0.1);
|
|
|
|
--primary: #3b82f6; /* Blue 500 */
|
|
--primary-foreground: #ffffff;
|
|
|
|
--secondary: rgba(39, 39, 42, 0.8); /* Zinc 800 */
|
|
--secondary-foreground: #fafafa;
|
|
|
|
--muted: rgba(39, 39, 42, 0.5);
|
|
--muted-foreground: #a1a1aa; /* Zinc 400 */
|
|
|
|
--destructive: #ef4444; /* Red 500 */
|
|
--destructive-foreground: #ffffff;
|
|
|
|
--sidebar: #09090b;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans), sans-serif;
|
|
background-image:
|
|
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
|
|
background-attachment: fixed;
|
|
}
|