/* 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 'ui-design-system/src/styles/fontfaces/inter';
@import 'ui-design-system/src/styles/fontfaces/comfortaa';

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

// Import UI Animations
@import '../../ui-animations/src/styles/index';

html {
  height: 100%;
  font-size: 16px; // Base font size for rem calculations
  
  // Define default CSS custom properties for fonts
  // These can be overridden by the font manager
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-family-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: $semantic-color-surface-primary;
  color: $semantic-color-text-primary;
  
  // Apply base typography using CSS custom properties first, then fallback to semantic tokens
  font-family: var(--font-family-sans, 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;
  
  // Support font transitions
  transition: font-family 0.3s ease-in-out;
}

// Global typography classes that respect font variables
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display, var(--font-family-sans));
  transition: font-family 0.3s ease-in-out;
}

// Serif elements
blockquote, .serif {
  font-family: var(--font-family-serif);
  transition: font-family 0.3s ease-in-out;
}

// Monospace elements  
code, pre, kbd, samp, .mono {
  font-family: var(--font-family-mono);
  transition: font-family 0.3s ease-in-out;
}

// Sans-serif elements
.sans {
  font-family: var(--font-family-sans);
  transition: font-family 0.3s ease-in-out;
}

// Display elements
.display {
  font-family: var(--font-family-display);
  transition: font-family 0.3s ease-in-out;
}
