any variables defined in my global.css file are not available in any other css files and i dont seem to be able to import global.css without getting an error

my global.css

# The variables i need access too
:root {
    --text: #eae9fc;
    --background: #0b001a;
    --primary: #3f39ac;
    --secondary: #34338a;
}

# Standard next.js stuff
* {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
}

html,
body {
      height: 100%;
}

a {
      color: inherit;
      text-decoration: none;
}

@media (prefers-color-scheme: dark) {
     html {
        color-scheme: dark;
      }
}

error:

 ⨯ ./src/app/layout.tsx:1:0
Module not found: Can't resolve './global.css'