/* ------------------------------------------------------------------ Design tokens ported 1:1 from the original Next.js site (src/app/globals.css + tailwind.config.ts). These feed the Tailwind CDN config in each HTML file, so utility classes like bg-background / text-muted-foreground look identical. ------------------------------------------------------------------ */ :root { /* Geist fonts (loaded via Google Fonts in the HTML ) */ --font-geist-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } /* Base layer (equivalent of the @layer base block in globals.css) */ * { border-color: hsl(var(--border)); } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Contact link highlight (footer) */ .contact-highlight { animation: highlight-animation 3s ease-in-out infinite; } @keyframes highlight-animation { 0%, 100% { opacity: 1; } 50% { color: #3b82f6; /* text-blue-500 */ } } /* Prevent theme flashes on toggle (mirrors next-themes disableTransitionOnChange) */ .disable-transitions * { transition: none !important; }