67 lines
1.6 KiB
CSS
67 lines
1.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
/* Light Mode - Default */
|
|
--background: #f8fafc;
|
|
--foreground: #0f172a;
|
|
|
|
/* Card colors */
|
|
--card-bg: #ffffff;
|
|
--card-border: #e2e8f0;
|
|
|
|
/* Vibrant accent colors */
|
|
--accent-blue: #3b82f6;
|
|
--accent-green: #10b981;
|
|
--accent-red: #f43f5e;
|
|
--accent-yellow: #f59e0b;
|
|
--accent-purple: #8b5cf6;
|
|
--accent-pink: #ec4899;
|
|
--accent-teal: #14b8a6;
|
|
--accent-orange: #f97316;
|
|
|
|
/* UI colors */
|
|
--text-secondary: #64748b;
|
|
--progress-bg: #e2e8f0;
|
|
|
|
/* Gradient colors */
|
|
--gradient-blue: linear-gradient(135deg, #3b82f6, #2563eb);
|
|
--gradient-purple: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
--gradient-green: linear-gradient(135deg, #10b981, #059669);
|
|
--gradient-red: linear-gradient(135deg, #f43f5e, #e11d48);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans), sans-serif;
|
|
}
|
|
|
|
/* Colorful gradient borders */
|
|
.gradient-border {
|
|
position: relative;
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gradient-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 0.5rem;
|
|
padding: 2px;
|
|
background: linear-gradient(45deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|