/* You can add global styles to this file, and also import other style files */

// Set font paths before importing fontfaces
$inter-font-path: "/fonts/inter/" !default;
$comfortaa-font-path: "/fonts/comfortaa/" !default;

// Import specific fonts we need for the demo
@import '../../shared-ui/src/styles/fontfaces/inter';
@import '../../shared-ui/src/styles/fontfaces/comfortaa';

// Import project variables (which now has semantic tokens available)
@import 'scss/_variables';

html {
  height: 100%;
  font-size: 16px; // Base font size for rem calculations
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: $semantic-color-surface-primary;
  color: $semantic-color-text-primary;
  
  // Apply base typography using semantic tokens
  font-family: map-get($semantic-typography-body-medium, font-family);
  font-size: map-get($semantic-typography-body-medium, font-size);
  font-weight: map-get($semantic-typography-body-medium, font-weight);
  line-height: map-get($semantic-typography-body-medium, line-height);
  
  // Improve text rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}