/* You can add global styles to this file, and also import other style files */
@use "@angular/material" as mat;

// Light Theme
$light-theme-primary: mat.define-palette(mat.$indigo-palette);
$light-theme-accent: mat.define-palette(mat.$purple-palette, A200, A100, A400);
$light-theme-warn: mat.define-palette(mat.$red-palette);

$light-theme: mat.define-light-theme((color: (primary: $light-theme-primary,
        accent: $light-theme-accent,
        warn: $light-theme-warn,
      ),
      typography: mat.define-typography-config(),
    ));

// Dark Theme
$dark-theme-primary: mat.define-palette(mat.$indigo-palette);
$dark-theme-accent: mat.define-palette(mat.$purple-palette, A200, A100, A400);
$dark-theme-warn: mat.define-palette(mat.$red-palette);

$dark-theme: mat.define-dark-theme((color: (primary: $dark-theme-primary,
        accent: $dark-theme-accent,
        warn: $dark-theme-warn,
      ),
      typography: mat.define-typography-config(),
    ));

// Dark theme variables
$dark-bg-color: #222;
$semi-dark-bg-color: #333;
$light-text-color: #cacaca;

// Light theme variables
$light-bg-color: #d2d2d2;
$semi-light-bg-color: #c0c0c0;
$dark-text-color: #333;


// Dark mode
.dark {
  @include mat.all-component-colors($dark-theme);

  background-color: $semi-dark-bg-color;
  color: $light-text-color;
}

// Light mode
.light {
  @include mat.all-component-themes($light-theme);
}
