/* These tokens are generated using https://themes.angular-material.dev/ */
/* Preview: https://themes.angular-material.dev/?bold-font-weight=700&brand-font-family=Roboto&medium-font-weight=500&plain-font-family=Roboto&regular-font-weight=400&seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
/* Seed Colors: primary: #6750A4, secondary: #958DA4, tertiary: #B58392, error: #FF5449, neutral: #938F94, neutral-variant: #948F99 */
/* Seed Typography: plain-font-family: Roboto, brand-font-family: Roboto, bold-font-weight: 700, medium-font-weight: 500, regular-font-weight: 400 */

/* Make sure to import fonts in `<head>` of html */
/*
<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap');
</style>

OR

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap">
*/

@use "@angular/material" as mat;


/* Light Theme */
:root, :host {
  @include mat.theme-overrides((
    primary: #6750a4,
    on-primary: #ffffff,
    primary-container: #e9ddff,
    on-primary-container: #22005d,
    inverse-primary: #cfbcff,
    primary-fixed: #e9ddff,
    primary-fixed-dim: #cfbcff,
    on-primary-fixed: #22005d,
    on-primary-fixed-variant: #4f378a,
    secondary: #625b70,
    on-secondary: #ffffff,
    secondary-container: #e8def8,
    on-secondary-container: #1e192b,
    secondary-fixed: #e8def8,
    secondary-fixed-dim: #ccc2db,
    on-secondary-fixed: #1e192b,
    on-secondary-fixed-variant: #4a4458,
    tertiary: #7e5260,
    on-tertiary: #ffffff,
    tertiary-container: #ffd9e3,
    on-tertiary-container: #31101d,
    tertiary-fixed: #ffd9e3,
    tertiary-fixed-dim: #efb8c8,
    on-tertiary-fixed: #31101d,
    on-tertiary-fixed-variant: #633b48,
    background: #fdf8f8,
    on-background: #1c1b1c,
    surface: #fdf8f8,
    surface-dim: #ddd9d9,
    surface-bright: #fdf8f8,
    surface-container-lowest: #ffffff,
    surface-container-low: #f7f3f2,
    surface-container: #f1eded,
    surface-container-high: #ebe7e7,
    surface-container-highest: #e6e1e1,
    on-surface: #1c1b1c,
    shadow: #000000,
    scrim: #000000,
    surface-tint: #605d62,
    inverse-surface: #313030,
    inverse-on-surface: #f4f0f0,
    outline: #79767b,
    outline-variant: #cac5cb,
    neutral: #797676,
    neutral10: #1c1b1c,
    error: #ba1a1a,
    error-container: #ffdad6,
    on-error: #ffffff,
    on-error-container: #410002,
    surface-variant: #e6e1e7,
    on-surface-variant: #48464b,
    neutral-variant: #79767b,
    neutral-variant20: #322f34,
    inverse-secondary: #ccc2db,
    inverse-tertiary: #efb8c8,
  ));
}

/* Dark Theme */
.dark {
  @include mat.theme-overrides((
    primary: #cfbcff,
    on-primary: #381e72,
    primary-container: #4f378a,
    on-primary-container: #e9ddff,
    inverse-primary: #6750a4,
    primary-fixed: #e9ddff,
    primary-fixed-dim: #cfbcff,
    on-primary-fixed: #22005d,
    on-primary-fixed-variant: #4f378a,
    secondary: #ccc2db,
    on-secondary: #332d40,
    secondary-container: #4a4458,
    on-secondary-container: #e8def8,
    secondary-fixed: #e8def8,
    secondary-fixed-dim: #ccc2db,
    on-secondary-fixed: #1e192b,
    on-secondary-fixed-variant: #4a4458,
    tertiary: #efb8c8,
    on-tertiary: #4a2532,
    tertiary-container: #633b48,
    on-tertiary-container: #ffd9e3,
    tertiary-fixed: #ffd9e3,
    tertiary-fixed-dim: #efb8c8,
    on-tertiary-fixed: #31101d,
    on-tertiary-fixed-variant: #633b48,
    background: #141313,
    on-background: #e6e1e1,
    surface: #141313,
    surface-dim: #141313,
    surface-bright: #3a3939,
    surface-container-lowest: #0f0e0e,
    surface-container-low: #1c1b1c,
    surface-container: #201f20,
    surface-container-high: #2b2a2a,
    surface-container-highest: #363435,
    on-surface: #e6e1e1,
    shadow: #000000,
    scrim: #000000,
    surface-tint: #cac5ca,
    inverse-surface: #e6e1e1,
    inverse-on-surface: #313030,
    outline: #938f95,
    outline-variant: #48464b,
    neutral: #797676,
    neutral10: #1c1b1c,
    error: #ffb4ab,
    error-container: #93000a,
    on-error: #690005,
    on-error-container: #ffdad6,
    surface-variant: #48464b,
    on-surface-variant: #cac5cb,
    neutral-variant: #79767b,
    neutral-variant20: #322f34,
    inverse-secondary: #625b70,
    inverse-tertiary: #7e5260,
  ));
}

/* Typography */
:root, :host {
  /* core typography tokens are not generating css variables, hence below */
  --mat-sys-brand-font-family: Roboto;
  --mat-sys-plain-font-family: Roboto;
  --mat-sys-bold-font-weight: 700;
  --mat-sys-medium-font-weight: 500;
  --mat-sys-regular-font-weight: 400;

  @include mat.theme-overrides((
    brand-family: Roboto,
    plain-family: Roboto,
    bold-weight: 700,
    medium-weight: 500,
    regular-weight: 400,
    headline-large-font: var(--mat-sys-brand-font-family),
    headline-medium-font: var(--mat-sys-brand-font-family),
    headline-small-font: var(--mat-sys-brand-font-family),
    display-large-font: var(--mat-sys-brand-font-family),
    display-medium-font: var(--mat-sys-brand-font-family),
    display-small-font: var(--mat-sys-brand-font-family),
    title-large-font: var(--mat-sys-brand-font-family),
    body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font),
    body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font),
    body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font),
    label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font),
    label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font),
    label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font),
    title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font),
    title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font),
    title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font),
    headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font),
    headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font),
    headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font),
    display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font),
    display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font),
    display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font),
    body-large-font: var(--mat-sys-plain-font-family),
    body-medium-font: var(--mat-sys-plain-font-family),
    body-small-font: var(--mat-sys-plain-font-family),
    label-large-font: var(--mat-sys-plain-font-family),
    label-medium-font: var(--mat-sys-plain-font-family),
    label-small-font: var(--mat-sys-plain-font-family),
    title-medium-font: var(--mat-sys-plain-font-family),
    title-small-font: var(--mat-sys-plain-font-family),
    label-large-weight-prominent: var(--mat-sys-bold-font-weight),
    label-medium-weight-prominent: var(--mat-sys-bold-font-weight),
    label-large-weight: var(--mat-sys-medium-font-weight),
    label-medium-weight: var(--mat-sys-medium-font-weight),
    label-small-weight: var(--mat-sys-medium-font-weight),
    title-medium-weight: var(--mat-sys-medium-font-weight),
    title-small-weight: var(--mat-sys-medium-font-weight),
    body-large-weight: var(--mat-sys-regular-font-weight),
    body-medium-weight: var(--mat-sys-regular-font-weight),
    body-small-weight: var(--mat-sys-regular-font-weight),
    display-large-weight: var(--mat-sys-regular-font-weight),
    display-medium-weight: var(--mat-sys-regular-font-weight),
    display-small-weight: var(--mat-sys-regular-font-weight),
    headline-large-weight: var(--mat-sys-regular-font-weight),
    headline-medium-weight: var(--mat-sys-regular-font-weight),
    headline-small-weight: var(--mat-sys-regular-font-weight),
    title-large-weight: var(--mat-sys-regular-font-weight),
  ));
}
