How would you organize global styles versus component specific styles in a large Next.js application?

You typically place truly global styles, like base typography and CSS variable definitions, in a single global stylesheet imported once in your root layout, while keeping component specific styling scoped locally using CSS Modules or Tailwind utility classes directly on each individual component.

// app/layout.js
import './globals.css';

export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}