@import 'tailwindcss';
@theme {
--color-accent: #14b8a6;
--color-bg: #090b0b;
--color-surface: rgba(255, 255, 255, 0.02);
--color-border: rgba(255, 255, 255, 0.05);
--color-text-primary: #fafafa;
--color-text-secondary: #e5e5e5;
--color-text-muted: #777;
--color-text-dim: #555;
--color-text-faint: #444;
--font-sans: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--animate-fade-up: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
--animate-fade-in: fade-in 0.5s ease both;
}
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@layer components {
.btn-primary {
@apply text-white px-7 py-3 rounded-lg text-[15px] font-semibold no-underline inline-flex items-center gap-2 transition-all duration-300 border-none cursor-pointer font-sans;
}
.btn-secondary {
@apply bg-white/[0.04] text-neutral-400 border border-white/[0.08] py-3 px-[22px] rounded-lg text-[13.5px] cursor-pointer;
}
}
