import { Instrument_Sans, JetBrains_Mono, Space_Grotesk } from "next/font/google";

import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { cn } from "@/lib/utils";

/*
 * Trois familles, trois rôles, et rien d'autre. Elles n'existent nulle part
 * ailleurs que dans les tokens `--font-sans` / `--font-heading` / `--font-mono`
 * de `globals.css` : aucun écran ne nomme une police.
 *
 * Les replis sont choisis à métriques proches (next/font génère en plus un
 * repli ajusté à partir des métriques réelles), pour que la bascule police
 * système → police chargée ne fasse pas sauter la mise en page.
 */

/** Interface et corps de texte. */
const fontSans = Instrument_Sans({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-instrument-sans",
  fallback: ["Helvetica Neue", "Arial", "sans-serif"],
});

/** Titres — la voix de la marque. */
const fontHeading = Space_Grotesk({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-space-grotesk",
  fallback: ["Helvetica Neue", "Arial", "sans-serif"],
});

/** Tous les chiffres : c'est elle qui aligne les colonnes de volumes. */
const fontMono = JetBrains_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-jetbrains-mono",
  fallback: ["SFMono-Regular", "Menlo", "Consolas", "monospace"],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={cn("antialiased", fontSans.variable, fontHeading.variable, fontMono.variable)}
    >
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}