78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
|
|
darkMode: "class", // Enable class-based dark mode for "Mood Mode"
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["var(--font-inter)", "sans-serif"],
|
|
display: ["var(--font-space)", "sans-serif"],
|
|
},
|
|
colors: {
|
|
// 2026 Fintech Palette
|
|
"cloud-dancer": "#F0EEE9", // Base Light
|
|
"teal": {
|
|
DEFAULT: "#316263", // Primary Brand
|
|
50: "#EBF5F5",
|
|
100: "#D6EBEB",
|
|
200: "#ADD6D6",
|
|
300: "#85C2C2",
|
|
400: "#5CADAD",
|
|
500: "#316263", // Base
|
|
600: "#274E4F",
|
|
700: "#1D3B3B",
|
|
800: "#142727",
|
|
900: "#0A1414",
|
|
},
|
|
"neon-lime": "#B6FF3B", // Accent / Success
|
|
"charcoal": "#121212", // Dark Mode Base
|
|
"electric-cyan": "#00FFFF", // Dark Mode Accent
|
|
|
|
// Semantic mappings
|
|
background: "var(--background)",
|
|
foreground: "var(--foreground)",
|
|
primary: "var(--primary)",
|
|
"primary-foreground": "var(--primary-foreground)",
|
|
secondary: "var(--secondary)",
|
|
"secondary-foreground": "var(--secondary-foreground)",
|
|
muted: "var(--muted)",
|
|
"muted-foreground": "var(--muted-foreground)",
|
|
accent: "var(--accent)",
|
|
"accent-foreground": "var(--accent-foreground)",
|
|
border: "var(--border)",
|
|
},
|
|
boxShadow: {
|
|
"glass": "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
|
|
"glow": "0 0 20px rgba(182, 255, 59, 0.3)",
|
|
"glow-teal": "0 0 30px rgba(49, 98, 99, 0.2)",
|
|
"cta": "0 18px 60px rgba(88, 80, 236, 0.45)",
|
|
"cta-hover": "0 22px 70px rgba(56, 189, 248, 0.5)",
|
|
},
|
|
backgroundImage: {
|
|
"gradient-hero": "linear-gradient(to right, #6366f1, #a855f7, #34d399)",
|
|
"gradient-hero-text": "linear-gradient(to right, #818cf8, #38bdf8, #34d399)",
|
|
},
|
|
animation: {
|
|
"pulse-slow": "pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
"float": "float 6s ease-in-out infinite",
|
|
"mesh": "mesh 20s infinite linear",
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
"0%, 100%": { transform: "translateY(0)" },
|
|
"50%": { transform: "translateY(-10px)" },
|
|
},
|
|
mesh: {
|
|
"0%": { backgroundPosition: "0% 50%" },
|
|
"50%": { backgroundPosition: "100% 50%" },
|
|
"100%": { backgroundPosition: "0% 50%" },
|
|
}
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
export default config;
|