import type { Metadata, Viewport } from 'next';
import { Golos_Text, Martian_Mono } from 'next/font/google';
import { StampInkFilter } from '@/components/Stamp';
import { TouchRecorder } from '@/components/TouchRecorder';
import { site } from '@/content/site';
import './globals.css';

const golos = Golos_Text({ subsets: ['cyrillic', 'latin'], variable: '--font-golos', display: 'swap' });
const martian = Martian_Mono({ subsets: ['cyrillic', 'latin'], variable: '--font-martian', axes: ['wdth'], display: 'swap' });

export const metadata: Metadata = {
  title: site.meta.title,
  description: site.meta.description,
};

export const viewport: Viewport = {
  themeColor: '#f3ebdd',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru" className={`${golos.variable} ${martian.variable}`}>
      <body>
        <StampInkFilter />
        {children}
        <TouchRecorder />
      </body>
    </html>
  );
}