Why can't i use imported css class in html?

I have an Angular project and created a custom theme with material theme creator. From the creator, I got 6 CSS files. In one of them, there are a lot of CSS variables created and in another it creates classes that use those CSS variables. Here is one of those classes:

.title-medium{
  font-family: var(--md-sys-typescale-title-medium-font-family-name);
  font-style: var(--md-sys-typescale-title-medium-font-family-style);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}

Another one just imports all the other 5 CSS files in the correct order. I just imported that one in my styles.css.

@import url(app/material-styles/theme.css);

I then use one of the imported classes in one of my components.

<div class="name-container">
  <h2 class="title-medium">{{ line1 }}</h2>
  <h1>{{ line2 }}</h1>
  <h3>{{ line3 }}</h3>
</div>

Sadly, this does not work at all. I also checked with the inspection tool and the style is not listed. Which is why I think it wasn't overridden.

I made my own class in the styles.css to check that the styles.css is integrated correctly. This worked fine.

.title-medium{
    color: red;
}

I then tried to use one of the variables in the components CSS which worked fine.

h2{
  font-size: var(--md-sys-typescale-title-medium-font-size);
}

I can also see all the registered CSS variables in the chrome inspection tool so this seems to work just fine.

The problem just occurs with the imported classes in the .HTML files. Any ideas what I am missing?

Edit:

The file structure is:

Frontend
|  angular.json (in here the styles.css is referenced)
|
|-src
   |  styles.css (in here I @import the theme.css)
   |  index.html
   |  main.ts
   |
   |-app
      |  app.component.css (empty)
      |  app.component.html
      |  app.component.ts
      |  app.module.ts
      |  
      |-app-welcome
         |  app-welcome.component.css
         |  app-welcome.component.html (uses class title-medium)
         |  app-welcome.component.ts
         | 
      |-material-styles
         |  theme.css (generated by the material design creator. imports all the other .css in this folder)
         |  theme.dark.css
         |  theme.light.css
         |  colors.module.css
         |  tokens.css (defines all the css variables)
         |  typography.module.css (defines class title-medium)

I did also adjust the theme.css according to the solution by @Flo. Before it did also use the url() version. It now looks like this:

@import "tokens.css";
@import "colors.module.css";
@import "typography.module.css";
@import "theme.light.css" (prefers-color-scheme: light);
@import "theme.dark.css" (prefers-color-scheme: dark);

Solution

Do the import without the url method like this:

@import "./app/material-styles/theme.css";

Then, whenever you use @import "...";, it will start from the css folder, so you can use @import "theme.scss";

The url part wanna be a complete http url as example.

Here is a Stackblitz example.

Update

We have solved it... The problem (or the second problem) was the name of one css file; it includes .module.css. And with this name webpack/Angular or anything has problems, but xxx.module.css is typically a css module.