@import "tailwindcss"; @layer base { :root { --radius: 0.5rem; /* Light Theme Palette */ --background: #f8fafc; /* Slate 50 */ --foreground: #0f172a; /* Slate 900 */ --card: #ffffff; --card-foreground: #0f172a; --header-bg: #0b1329; /* Rich Deep Slate */ --header-text: #f8fafc; --primary: #15803d; /* Green 700 */ --primary-hover: #166534; /* Green 800 */ --primary-foreground: #ffffff; --accent-emerald: #10b981; /* Emerald 500 */ --accent-gold: #f59e0b; /* Amber 500 */ --accent-gold-hover: #d97706; /* Amber 600 */ --muted: #f1f5f9; /* Slate 100 */ --muted-foreground: #64748b; /* Slate 500 */ --border: #e2e8f0; /* Slate 200 */ --input: #cbd5e1; /* Slate 300 */ --shadow-color: rgba(15, 23, 42, 0.05); --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; } /* Dark Theme Palette (System Preference & Manual Switch) */ @media (prefers-color-scheme: dark) { :root { --background: #0b0f19; /* Ultra Deep Slate */ --foreground: #f8fafc; /* Slate 50 */ --card: #111827; /* Slate 900 / Dark Card */ --card-foreground: #f8fafc; --header-bg: #070a12; /* Pitch Slate Header */ --header-text: #f8fafc; --primary: #16a34a; /* Green 600 (Slightly brighter for dark mode contrast) */ --primary-hover: #15803d; /* Green 700 */ --primary-foreground: #ffffff; --accent-emerald: #34d399; /* Emerald 400 */ --accent-gold: #f59e0b; --accent-gold-hover: #fbbf24; --muted: #1e293b; /* Slate 800 */ --muted-foreground: #94a3b8; /* Slate 400 */ --border: #1e293b; /* Slate 800 */ --input: #334155; /* Slate 700 */ --shadow-color: rgba(0, 0, 0, 0.4); } } /* Manual Dark Class Support (if toggled via JS on or ) */ .dark { --background: #0b0f19; --foreground: #f8fafc; --card: #111827; --card-foreground: #f8fafc; --header-bg: #070a12; --header-text: #f8fafc; --primary: #16a34a; --primary-hover: #15803d; --primary-foreground: #ffffff; --accent-emerald: #34d399; --muted: #1e293b; --muted-foreground: #94a3b8; --border: #1e293b; --input: #334155; --shadow-color: rgba(0, 0, 0, 0.4); } * { border-color: var(--border); } html { font-family: var(--font-sans); scroll-behavior: smooth; } body { background-color: var(--background); color: var(--foreground); min-height: 100vh; display: flex; flex-direction: column; /* Smooth theme transition */ transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display); letter-spacing: -0.02em; } } /* Base Defensive Resets */ img, svg { max-width: 100% !important; height: auto; } .lucide, svg.icon, nav svg { width: 1.25rem !important; height: 1.25rem !important; display: inline-block; vertical-align: middle; } /* Form Fields */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 0.625rem 0.875rem; background-color: var(--card); /* Adaptive background */ color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius); transition: all 0.2s ease-in-out; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); } /* Visual Components */ .bg-header { background-color: var(--header-bg); color: var(--header-text); } .card { background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); transition: background-color 0.25s ease, border-color 0.25s ease; } /* Enhanced Buttons with subtle depth */ .btn-primary { background-color: var(--primary); color: var(--primary-foreground); font-weight: 600; padding: 0.625rem 1.25rem; border-radius: var(--radius); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25); } .btn-gold { background-color: var(--accent-gold); color: #0f172a; /* Dark text on gold button for better WCAG contrast */ font-weight: 600; padding: 0.625rem 1.25rem; border-radius: var(--radius); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-gold:hover { background-color: var(--accent-gold-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); } .card-shadow { box-shadow: 0 4px 12px -2px var(--shadow-color), 0 2px 4px -1px var(--shadow-color); }