@font-face {
            font-family: "PrimaryFont";
            src: url("/assets/fonts/variable/clash.woff2");
            font-weight: 300..900;
            font-display: block;
            font-style: normal;
        }
        
        @font-face {
            font-family: "SecondaryFont";
            src: url("/assets/fonts/variable/instrument.ttf");
            font-weight: 300..900;
            font-display: block;
            font-style: normal;
        }
        
        @font-face {
            font-family: "LogoFont";
            src: url("/assets/fonts/variable/clash.woff2");
            font-weight: 300..900;
            font-display: block;
            font-style: normal;
        }
        
@layer base {
    :root {
                    --background: var(--color-stone-100);
                    --foreground: var(--color-gray-900);
                    --primary: hsl(0 0% 9%);
                    --primary-foreground: hsl(0 0% 98%);
                    --secondary: hsl(0 0% 92.1%);
                    --secondary-foreground: hsl(0 0% 9%);
                    --accent: var(--color-purple-700);
                    --accent-foreground: var(--color-white);
                    --accent-secondary: var(--color-teal-500);
                    --accent-secondary-foreground: var(--color-white);
                    --accent-tertiary: var(--color-pink-500);
                    --accent-tertiary-foreground: var(--color-white);
                    --input: hsl(0 0% 89.8%);
                    --ring: hsl(0 0% 3.9%);
                    --card: var(--color-white);
                    --card-foreground: hsl(0 0% 3.9%);
                    --popover: hsl(0 0% 100%);
                    --popover-foreground: hsl(0 0% 3.9%);
                    --muted: hsl(0 0% 96.1%);
                    --muted-foreground: var(--color-gray-500);
                    --destructive: hsl(0 84.2% 60.2%);
                    --destructive-foreground: hsl(0 0% 98%);
                    --border: oklch(0.2 0 0 / 0.15);
            }
}