styles.css.ts

import { globalFontFace, globalStyle } from "@vanilla-extract/css"
import { theme } from "./theme.css"

globalFontFace("UntitledSansRegular", {
    src: "./fonts/untitled-sans-regular.woff2"
    
    // i’ve also tried:
    // src: 'local("./fonts/untitled-sans-regular.woff2")',
  });

globalStyle("*", {
    boxSizing: "border-box",
})

globalStyle("html", {
    backgroundColor: theme.colors.background,
    color: theme.colors.text,
})

globalStyle("html, body", {
    height: "100%",
    fontSize: "18px",
})

globalStyle("body", {
    margin: 0,
    fontFamily: "UntitledSansRegular",
    lineHeight: 1.5,
    WebkitFontSmoothing: "antialiased",
})

globalStyle("a", {
    color: theme.colors.text,
    textDecoration: "none",
})