@use '@angular/material' as mat;


// Material 3 theming. `color-scheme: light dark` lets a single theme definition
// follow the OS preference, so there is no separate dark stylesheet to maintain.
html {
  color-scheme: light dark;

  @include mat.theme(
    (
      color: (
        primary: mat.$violet-palette,
        tertiary: mat.$magenta-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font-family: var(--mat-sys-body-medium-font, Roboto, sans-serif);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--mat-sys-primary);
}

// Respect users who have asked for less motion.
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}