Mayur Shinde
77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
// Extra-small breakpoint for fine mobile-first control (additive — does not
|
|
// affect the default sm/md/lg/xl screens).
|
|
screens: {
|
|
xs: '400px',
|
|
},
|
|
|
|
// --- Typography ---
|
|
fontFamily: {
|
|
display: ['"Instrument Serif"', 'Georgia', 'serif'],
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['"JetBrains Mono"', 'Consolas', 'monospace'],
|
|
},
|
|
|
|
// --- Color System: "Modern Trust" ---
|
|
colors: {
|
|
// Semantic surface colors
|
|
surface: {
|
|
DEFAULT: '#09090b', // zinc-950 — primary bg
|
|
secondary: '#0a0f1a', // navy-black — command center sections
|
|
card: 'rgba(255,255,255,0.05)',
|
|
'card-hover': 'rgba(255,255,255,0.08)',
|
|
},
|
|
// Semantic border
|
|
border: {
|
|
subtle: 'rgba(255,255,255,0.05)',
|
|
hover: 'rgba(255,255,255,0.10)',
|
|
},
|
|
// Accent system
|
|
accent: {
|
|
DEFAULT: '#3b82f6', // Blue-500 — primary action, trust
|
|
hover: '#2563eb', // Blue-600
|
|
data: '#06b6d4', // Cyan-500 — HUD/data readouts ONLY
|
|
home: '#10b981', // Emerald-500 — homeowner warmth/safety
|
|
urgency: '#f59e0b', // Amber-500 — weather alerts, deadlines
|
|
danger: '#ef4444', // Red-500 — critical states only
|
|
},
|
|
},
|
|
|
|
// --- Spacing & Layout ---
|
|
maxWidth: {
|
|
'content': '80rem', // 1280px — primary content width
|
|
'prose': '56rem', // 896px — text-heavy sections
|
|
},
|
|
|
|
// --- Construction-themed background patterns ---
|
|
backgroundImage: {
|
|
// Blueprint grid — engineering/architectural precision
|
|
'blueprint': [
|
|
'linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px)',
|
|
'linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px)',
|
|
].join(', '),
|
|
// Blueprint with finer sub-grid
|
|
'blueprint-fine': [
|
|
'linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px)',
|
|
'linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px)',
|
|
'linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px)',
|
|
'linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px)',
|
|
].join(', '),
|
|
},
|
|
backgroundSize: {
|
|
'blueprint': '48px 48px',
|
|
'blueprint-fine': '12px 12px, 12px 12px, 48px 48px, 48px 48px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|