Files
web-hosts/domains/coppertone.tech/frontend/tailwind.config.js
2025-12-26 13:38:04 +01:00

52 lines
2.0 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: {
extend: {
colors: {
// Modern, professional color palette with refined copper accents
'primary': '#0F766E', // Teal-700 - Modern, professional, trustworthy (tech industry standard)
'primary-light': '#14B8A6', // Teal-500 - Lighter accent for hover states
'primary-dark': '#134E4A', // Teal-900 - Darker for text/emphasis
'secondary': '#C77B4A', // Refined copper/bronze - Maintains brand identity, more elegant
'secondary-light': '#E6A47C', // Light copper for backgrounds
'secondary-dark': '#8B5A3C', // Dark copper for contrast
'accent': '#3B82F6', // Blue-500 - Vibrant, high-contrast for CTAs
'accent-hover': '#2563EB', // Blue-600 - Hover state
'neutral-light': '#F9FAFB', // Gray-50 - Clean, crisp backgrounds
'neutral': '#E5E7EB', // Gray-200 - Borders and dividers
'neutral-medium': '#6B7280', // Gray-500 - Secondary text
'neutral-dark': '#1F2937', // Gray-800 - Primary text, high readability
'neutral-darker': '#111827', // Gray-900 - Headers, emphasis
'success': '#10B981', // Green-500 - Success states
'warning': '#F59E0B', // Amber-500 - Warning states
'error': '#EF4444', // Red-500 - Error states
'info': '#06B6D4', // Cyan-500 - Info states
},
fontFamily: {
sans: ['Inter var', 'Inter', 'system-ui', '-apple-system', 'sans-serif'],
display: ['Poppins', 'Inter var', 'sans-serif'],
},
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
},
boxShadow: {
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
'hover': '0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 15px 30px -5px rgba(0, 0, 0, 0.08)',
},
},
},
plugins: [],
}