@use '_theme-colors' as toolchat-theme;

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;

// Create Material Design 3 theme with enhanced configuration
$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: toolchat-theme.$primary-palette,
    tertiary: toolchat-theme.$tertiary-palette,
    use-system-variables: true,
  ),
  typography: (
    brand-family: 'Roboto',
    plain-family: 'Roboto',
    bold-weight: 500,
    medium-weight: 400,
    regular-weight: 400,
  ),
  density: (
    scale: 0,
  ),
));

// Create dark theme
$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: toolchat-theme.$primary-palette,
    tertiary: toolchat-theme.$tertiary-palette,
    use-system-variables: true,
  ),
  typography: (
    brand-family: 'Roboto',
    plain-family: 'Roboto',
    bold-weight: 500,
    medium-weight: 400,
    regular-weight: 400,
  ),
  density: (
    scale: 0,
  ),
));

// Apply light theme by default
html {
  @include mat.all-component-themes($light-theme);
}

// Apply dark theme when user prefers dark mode
@media (prefers-color-scheme: dark) {
  html {
    @include mat.all-component-colors($dark-theme);
  }
}
