/* generated by ci-toolbox/sync-web-tokens.py — do not edit manually */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap');


/* ---- NgHome/src/assets/design-tokens/colors.css ---- */
:root {
  --mdui-color-primary: 71, 93, 146;
  --mdui-color-surface-tint: 71, 93, 146;
  --mdui-color-on-primary: 255, 255, 255;
  --mdui-color-primary-container: 217, 226, 255;
  --mdui-color-on-primary-container: 0, 25, 69;
  --mdui-color-secondary: 87, 94, 113;
  --mdui-color-on-secondary: 255, 255, 255;
  --mdui-color-secondary-container: 220, 226, 249;
  --mdui-color-on-secondary-container: 20, 27, 44;
  --mdui-color-tertiary: 114, 85, 114;
  --mdui-color-on-tertiary: 255, 255, 255;
  --mdui-color-tertiary-container: 253, 215, 250;
  --mdui-color-on-tertiary-container: 42, 19, 44;
  --mdui-color-error: 186, 26, 26;
  --mdui-color-on-error: 255, 255, 255;
  --mdui-color-error-container: 255, 218, 214;
  --mdui-color-on-error-container: 65, 0, 2;
  --mdui-color-background: 250, 248, 255;
  --mdui-color-on-background: 26, 27, 32;
  --mdui-color-surface: 250, 248, 255;
  --mdui-color-on-surface: 26, 27, 32;
  --mdui-color-surface-variant: 225, 226, 236;
  --mdui-color-on-surface-variant: 68, 70, 79;
  --mdui-color-outline: 117, 119, 128;
  --mdui-color-outline-variant: 197, 198, 208;
  --mdui-color-shadow: 0, 0, 0;
  --mdui-color-scrim: 0, 0, 0;
  --mdui-color-inverse-surface: 47, 48, 54;
  --mdui-color-inverse-on-surface: 241, 240, 247;
  --mdui-color-inverse-primary: 176, 198, 255;
  --mdui-color-primary-fixed: 217, 226, 255;
  --mdui-color-on-primary-fixed: 0, 25, 69;
  --mdui-color-primary-fixed-dim: 176, 198, 255;
  --mdui-color-on-primary-fixed-variant: 46, 69, 120;
  --mdui-color-secondary-fixed: 220, 226, 249;
  --mdui-color-on-secondary-fixed: 20, 27, 44;
  --mdui-color-secondary-fixed-dim: 192, 198, 220;
  --mdui-color-on-secondary-fixed-variant: 64, 70, 89;
  --mdui-color-tertiary-fixed: 253, 215, 250;
  --mdui-color-on-tertiary-fixed: 42, 19, 44;
  --mdui-color-tertiary-fixed-dim: 224, 187, 221;
  --mdui-color-on-tertiary-fixed-variant: 89, 61, 90;
  --mdui-color-surface-dim: 218, 217, 224;
  --mdui-color-surface-bright: 250, 248, 255;
  --mdui-color-surface-container-lowest: 255, 255, 255;
  --mdui-color-surface-container-low: 244, 243, 250;
  --mdui-color-surface-container: 238, 237, 244;
  --mdui-color-surface-container-high: 232, 231, 239;
  --mdui-color-surface-container-highest: 226, 226, 233;
}

/* material-theme - Light */
:root {
  --mat-sys-primary: #475d92ff;
  --mat-sys-surface-tint: #475d92ff;
  --mat-sys-on-primary: #ffffffff;
  --mat-sys-primary-container: #d9e2ffff;
  --mat-sys-on-primary-container: #001945ff;
  --mat-sys-secondary: #575e71ff;
  --mat-sys-on-secondary: #ffffffff;
  --mat-sys-secondary-container: #dce2f9ff;
  --mat-sys-on-secondary-container: #141b2cff;
  --mat-sys-tertiary: #725572ff;
  --mat-sys-on-tertiary: #ffffffff;
  --mat-sys-tertiary-container: #fdd7faff;
  --mat-sys-on-tertiary-container: #2a132cff;
  --mat-sys-error: #ba1a1aff;
  --mat-sys-on-error: #ffffffff;
  --mat-sys-error-container: #ffdad6ff;
  --mat-sys-on-error-container: #410002ff;
  --mat-sys-background: #faf8ffff;
  --mat-sys-on-background: #1a1b20ff;
  --mat-sys-surface: #faf8ffff;
  --mat-sys-on-surface: #1a1b20ff;
  --mat-sys-surface-variant: #e1e2ecff;
  --mat-sys-on-surface-variant: #44464fff;
  --mat-sys-outline: #757780ff;
  --mat-sys-outline-variant: #c5c6d0ff;
  --mat-sys-shadow: #000000ff;
  --mat-sys-scrim: #000000ff;
  --mat-sys-inverse-surface: #2f3036ff;
  --mat-sys-inverse-on-surface: #f1f0f7ff;
  --mat-sys-inverse-primary: #b0c6ffff;
  --mat-sys-primary-fixed: #d9e2ffff;
  --mat-sys-on-primary-fixed: #001945ff;
  --mat-sys-primary-fixed-dim: #b0c6ffff;
  --mat-sys-on-primary-fixed-variant: #2e4578ff;
  --mat-sys-secondary-fixed: #dce2f9ff;
  --mat-sys-on-secondary-fixed: #141b2cff;
  --mat-sys-secondary-fixed-dim: #c0c6dcff;
  --mat-sys-on-secondary-fixed-variant: #404659ff;
  --mat-sys-tertiary-fixed: #fdd7faff;
  --mat-sys-on-tertiary-fixed: #2a132cff;
  --mat-sys-tertiary-fixed-dim: #e0bbddff;
  --mat-sys-on-tertiary-fixed-variant: #593d5aff;
  --mat-sys-surface-dim: #dad9e0ff;
  --mat-sys-surface-bright: #faf8ffff;
  --mat-sys-surface-container-lowest: #ffffffff;
  --mat-sys-surface-container-low: #f4f3faff;
  --mat-sys-surface-container: #eeedf4ff;
  --mat-sys-surface-container-high: #e8e7efff;
  --mat-sys-surface-container-highest: #e2e2e9ff;
}

/* material-theme - Light */
:root {
  --Schemes-Primary: #475d92ff;
  --Schemes-Surface-Tint: #475d92ff;
  --Schemes-On-Primary: #ffffffff;
  --Schemes-Primary-Container: #d9e2ffff;
  --Schemes-On-Primary-Container: #001945ff;
  --Schemes-Secondary: #575e71ff;
  --Schemes-On-Secondary: #ffffffff;
  --Schemes-Secondary-Container: #dce2f9ff;
  --Schemes-On-Secondary-Container: #141b2cff;
  --Schemes-Tertiary: #725572ff;
  --Schemes-On-Tertiary: #ffffffff;
  --Schemes-Tertiary-Container: #fdd7faff;
  --Schemes-On-Tertiary-Container: #2a132cff;
  --Schemes-Error: #ba1a1aff;
  --Schemes-On-Error: #ffffffff;
  --Schemes-Error-Container: #ffdad6ff;
  --Schemes-On-Error-Container: #410002ff;
  --Schemes-Background: #faf8ffff;
  --Schemes-On-Background: #1a1b20ff;
  --Schemes-Surface: #faf8ffff;
  --Schemes-On-Surface: #1a1b20ff;
  --Schemes-Surface-Variant: #e1e2ecff;
  --Schemes-On-Surface-Variant: #44464fff;
  --Schemes-Outline: #757780ff;
  --Schemes-Outline-Variant: #c5c6d0ff;
  --Schemes-Shadow: #000000ff;
  --Schemes-Scrim: #000000ff;
  --Schemes-Inverse-Surface: #2f3036ff;
  --Schemes-Inverse-On-Surface: #f1f0f7ff;
  --Schemes-Inverse-Primary: #b0c6ffff;
  --Schemes-Primary-Fixed: #d9e2ffff;
  --Schemes-On-Primary-Fixed: #001945ff;
  --Schemes-Primary-Fixed-Dim: #b0c6ffff;
  --Schemes-On-Primary-Fixed-Variant: #2e4578ff;
  --Schemes-Secondary-Fixed: #dce2f9ff;
  --Schemes-On-Secondary-Fixed: #141b2cff;
  --Schemes-Secondary-Fixed-Dim: #c0c6dcff;
  --Schemes-On-Secondary-Fixed-Variant: #404659ff;
  --Schemes-Tertiary-Fixed: #fdd7faff;
  --Schemes-On-Tertiary-Fixed: #2a132cff;
  --Schemes-Tertiary-Fixed-Dim: #e0bbddff;
  --Schemes-On-Tertiary-Fixed-Variant: #593d5aff;
  --Schemes-Surface-Dim: #dad9e0ff;
  --Schemes-Surface-Bright: #faf8ffff;
  --Schemes-Surface-Container-Lowest: #ffffffff;
  --Schemes-Surface-Container-Low: #f4f3faff;
  --Schemes-Surface-Container: #eeedf4ff;
  --Schemes-Surface-Container-High: #e8e7efff;
  --Schemes-Surface-Container-Highest: #e2e2e9ff;

  /* Interaction-state overlay shared by the Unity webview pages (MD3 hover state layer:
     on-surface at 8%). Pressed states stay per-page (the toolbar presses blue). */
  --hover-bg: rgba(29, 27, 32, 0.08);
}


/* ---- NgHome/src/assets/design-tokens/shape.css ---- */
/* Shape - Baseline */
:root {
  --mdui-shape-corner-none: 0px;
  --mdui-shape-corner-extra-small: 4px;
  --mdui-shape-corner-small: 8px;
  --mdui-shape-corner-medium: 12px;
  --mdui-shape-corner-large: 16px;
  --mdui-shape-corner-large-increased: 20px;
  --mdui-shape-corner-extra-large: 28px;
  --mdui-shape-corner-extra-large-increased: 32px;
  --mdui-shape-corner-extra-extra-large: 48px;
  --mdui-shape-corner-full: 1000px;
}

/* Shape - FB commons */
:root {
  --fb-spacing: 1.5rem;
  --fb-spacing-half: 0.75rem;
  --fb-spacing-quarter: 0.375rem;
  --fb-spacing-sixth: 0.25rem;
  --fb-spacing-twelfth: 0.125rem;
}


/* ---- NgHome/src/assets/design-tokens/typescale.css ---- */
/* Font theme - Baseline */
:root {
  --static-font-brand: Roboto;
  --static-weight-regular: 400;
  --static-weight-medium: 500;
  --static-weight-bold: 600;
  --static-font-plain: Roboto;
  /* Monospace family for fixed-width values like IDs (User ID / Session ID). Roboto Mono is used
     only if installed locally — it is deliberately NOT fetched from Google Fonts, because the
     served Roboto Mono v31 woff2 has a malformed composite glyph that Firefox's font sanitizer
     reports on every page load ("glyf: empty gid 1 used as component in glyph 225"). */
  --static-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tracking-none: 0px;
  --tracking-small: 0.10000000149011612px;
}

/* Typescale - Baseline */
:root {
  --mdui-typescale-display-large-font: var(--static-font-brand);
  --mdui-typescale-display-medium-font: var(--static-font-brand);
  --mdui-typescale-display-medium-weight: var(--static-weight-regular);
  --mdui-typescale-display-medium-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-display-medium-size: 45px;
  --mdui-typescale-display-medium-line-height: 52px;
  --mdui-typescale-display-medium-tracking: 0px;
  --mdui-typescale-display-small-font: var(--static-font-brand);
  --mdui-typescale-headline-large-font: var(--static-font-brand);
  --mdui-typescale-headline-large-weight: var(--static-weight-regular);
  --mdui-typescale-headline-large-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-headline-large-size: 32px;
  --mdui-typescale-headline-large-line-height: 40px;
  --mdui-typescale-headline-large-tracking: 0px;
  --mdui-typescale-headline-medium-font: var(--static-font-brand);
  --mdui-typescale-headline-medium-weight: var(--static-weight-regular);
  --mdui-typescale-headline-medium-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-headline-medium-size: 28px;
  --mdui-typescale-headline-medium-line-height: 36px;
  --mdui-typescale-headline-medium-tracking: 0px;
  --mdui-typescale-headline-small-font: var(--static-font-brand);
  --mdui-typescale-title-large-font: var(--static-font-brand);
  --mdui-typescale-title-large-weight: var(--static-weight-regular);
  --mdui-typescale-title-large-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-title-large-size: 22px;
  --mdui-typescale-title-large-line-height: 28px;
  --mdui-typescale-title-large-tracking: 0px;
  --mdui-typescale-title-medium-font: var(--static-font-plain);
  --mdui-typescale-title-medium-weight: var(--static-weight-medium);
  --mdui-typescale-title-medium-weight-emphasized: var(--static-weight-bold);
  --mdui-typescale-title-medium-size: 16px;
  --mdui-typescale-title-medium-line-height: 24px;
  --mdui-typescale-title-medium-tracking: 0.15000000596046448px;
  --mdui-typescale-headline-small-weight: var(--static-weight-regular);
  --mdui-typescale-headline-small-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-headline-small-size: 24px;
  --mdui-typescale-headline-small-line-height: 32px;
  --mdui-typescale-headline-small-tracking: 0px;
  --mdui-typescale-display-small-weight: var(--static-weight-regular);
  --mdui-typescale-display-small-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-display-small-size: 36px;
  --mdui-typescale-display-small-line-height: 44px;
  --mdui-typescale-display-small-tracking: 0px;
  --mdui-typescale-title-small-font: var(--static-font-plain);
  --mdui-typescale-title-small-weight: var(--static-weight-medium);
  --mdui-typescale-title-small-weight-emphasized: var(--static-weight-bold);
  --mdui-typescale-title-small-size: 14px;
  --mdui-typescale-title-small-line-height: 20px;
  --mdui-typescale-title-small-tracking: 0.10000000149011612px;
  --mdui-typescale-label-large-font: var(--static-font-plain);
  --mdui-typescale-label-large-weight: var(--static-weight-medium);
  --mdui-typescale-label-large-weight-emphasized: var(--static-weight-bold);
  --mdui-typescale-label-large-size: 14px;
  --mdui-typescale-label-large-line-height: 20px;
  --mdui-typescale-label-large-tracking: 0.10000000149011612px;
  --mdui-typescale-label-medium-font: var(--static-font-plain);
  --mdui-typescale-label-medium-weight: var(--static-weight-medium);
  --mdui-typescale-label-medium-weight-emphasized: var(--static-weight-bold);
  --mdui-typescale-label-medium-size: 12px;
  --mdui-typescale-label-medium-line-height: 16px;
  --mdui-typescale-label-medium-tracking: 0.5px;
  --mdui-typescale-label-small-font: var(--static-font-plain);
  --mdui-typescale-label-small-weight: var(--static-weight-medium);
  --mdui-typescale-label-small-weight-emphasized: var(--static-weight-bold);
  --mdui-typescale-label-small-size: 11px;
  --mdui-typescale-label-small-line-height: 16px;
  --mdui-typescale-label-small-tracking: 0.5px;
  --mdui-typescale-body-large-font: var(--static-font-plain);
  --mdui-typescale-body-large-weight: var(--static-weight-regular);
  --mdui-typescale-body-large-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-body-large-size: 16px;
  --mdui-typescale-body-large-line-height: 24px;
  --mdui-typescale-body-large-tracking: 0.5px;
  --mdui-typescale-body-medium-font: var(--static-font-plain);
  --mdui-typescale-body-medium-weight: var(--static-weight-regular);
  --mdui-typescale-body-medium-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-body-medium-size: 14px;
  --mdui-typescale-body-medium-line-height: 20px;
  --mdui-typescale-body-medium-tracking: 0.25px;
  --mdui-typescale-body-small-font: var(--static-font-plain);
  --mdui-typescale-body-small-weight: var(--static-weight-regular);
  --mdui-typescale-body-small-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-body-small-size: 12px;
  --mdui-typescale-body-small-line-height: 16px;
  --mdui-typescale-body-small-tracking: 0.4000000059604645px;
  --mdui-typescale-display-large-weight: var(--static-weight-regular);
  --mdui-typescale-display-large-weight-emphasized: var(--static-weight-medium);
  --mdui-typescale-display-large-size: 57px;
  --mdui-typescale-display-large-line-height: 64px;
  --mdui-typescale-display-large-tracking: -0.25px;
}

/* Role + Size combinations */
.display.large {
  font-family: var(--mdui-typescale-display-large-font);
  font-weight: var(--mdui-typescale-display-large-weight);
  font-size: var(--mdui-typescale-display-large-size);
  line-height: var(--mdui-typescale-display-large-line-height);
  letter-spacing: var(--mdui-typescale-display-large-tracking);
}

.display.medium {
  font-family: var(--mdui-typescale-display-medium-font);
  font-weight: var(--mdui-typescale-display-medium-weight);
  font-size: var(--mdui-typescale-display-medium-size);
  line-height: var(--mdui-typescale-display-medium-line-height);
  letter-spacing: var(--mdui-typescale-display-medium-tracking);
}

.display.small {
  font-family: var(--mdui-typescale-display-small-font);
  font-weight: var(--mdui-typescale-display-small-weight);
  font-size: var(--mdui-typescale-display-small-size);
  line-height: var(--mdui-typescale-display-small-line-height);
  letter-spacing: var(--mdui-typescale-display-small-tracking);
}

.headline.large {
  font-family: var(--mdui-typescale-headline-large-font);
  font-weight: var(--mdui-typescale-headline-large-weight);
  font-size: var(--mdui-typescale-headline-large-size);
  line-height: var(--mdui-typescale-headline-large-line-height);
  letter-spacing: var(--mdui-typescale-headline-large-tracking);
}

.headline.medium {
  font-family: var(--mdui-typescale-headline-medium-font);
  font-weight: var(--mdui-typescale-headline-medium-weight);
  font-size: var(--mdui-typescale-headline-medium-size);
  line-height: var(--mdui-typescale-headline-medium-line-height);
  letter-spacing: var(--mdui-typescale-headline-medium-tracking);
}

.headline.small {
  font-family: var(--mdui-typescale-headline-small-font);
  font-weight: var(--mdui-typescale-headline-small-weight);
  font-size: var(--mdui-typescale-headline-small-size);
  line-height: var(--mdui-typescale-headline-small-line-height);
  letter-spacing: var(--mdui-typescale-headline-small-tracking);
}

.title.large {
  font-family: var(--mdui-typescale-title-large-font);
  font-weight: var(--mdui-typescale-title-large-weight);
  font-size: var(--mdui-typescale-title-large-size);
  line-height: var(--mdui-typescale-title-large-line-height);
  letter-spacing: var(--mdui-typescale-title-large-tracking);
}

.title.medium {
  font-family: var(--mdui-typescale-title-medium-font);
  font-weight: var(--mdui-typescale-title-medium-weight);
  font-size: var(--mdui-typescale-title-medium-size);
  line-height: var(--mdui-typescale-title-medium-line-height);
  letter-spacing: var(--mdui-typescale-title-medium-tracking);
}

.title.small {
  font-family: var(--mdui-typescale-title-small-font);
  font-weight: var(--mdui-typescale-title-small-weight);
  font-size: var(--mdui-typescale-title-small-size);
  line-height: var(--mdui-typescale-title-small-line-height);
  letter-spacing: var(--mdui-typescale-title-small-tracking);
}

.label.large {
  font-family: var(--mdui-typescale-label-large-font);
  font-weight: var(--mdui-typescale-label-large-weight);
  font-size: var(--mdui-typescale-label-large-size);
  line-height: var(--mdui-typescale-label-large-line-height);
  letter-spacing: var(--mdui-typescale-label-large-tracking);
}

.label.medium {
  font-family: var(--mdui-typescale-label-medium-font);
  font-weight: var(--mdui-typescale-label-medium-weight);
  font-size: var(--mdui-typescale-label-medium-size);
  line-height: var(--mdui-typescale-label-medium-line-height);
  letter-spacing: var(--mdui-typescale-label-medium-tracking);
}

.label.small {
  font-family: var(--mdui-typescale-label-small-font);
  font-weight: var(--mdui-typescale-label-small-weight);
  font-size: var(--mdui-typescale-label-small-size);
  line-height: var(--mdui-typescale-label-small-line-height);
  letter-spacing: var(--mdui-typescale-label-small-tracking);
}

.body.large {
  font-family: var(--mdui-typescale-body-large-font);
  font-weight: var(--mdui-typescale-body-large-weight);
  font-size: var(--mdui-typescale-body-large-size);
  line-height: var(--mdui-typescale-body-large-line-height);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
}

.body.medium {
  font-family: var(--mdui-typescale-body-medium-font);
  font-weight: var(--mdui-typescale-body-medium-weight);
  font-size: var(--mdui-typescale-body-medium-size);
  line-height: var(--mdui-typescale-body-medium-line-height);
  letter-spacing: var(--mdui-typescale-body-medium-tracking);
}

.body.small {
  font-family: var(--mdui-typescale-body-small-font);
  font-weight: var(--mdui-typescale-body-small-weight);
  font-size: var(--mdui-typescale-body-small-size);
  line-height: var(--mdui-typescale-body-small-line-height);
  letter-spacing: var(--mdui-typescale-body-small-tracking);
}

/* Emphasized modifier */
.emphasized {
  &.display.large {
    font-weight: var(--mdui-typescale-display-large-weight-emphasized);
  }
  &.display.medium {
    font-weight: var(--mdui-typescale-display-medium-weight-emphasized);
  }
  &.display.small {
    font-weight: var(--mdui-typescale-display-small-weight-emphasized);
  }
  &.headline.large {
    font-weight: var(--mdui-typescale-headline-large-weight-emphasized);
  }
  &.headline.medium {
    font-weight: var(--mdui-typescale-headline-medium-weight-emphasized);
  }
  &.headline.small {
    font-weight: var(--mdui-typescale-headline-small-weight-emphasized);
  }
  &.title.large {
    font-weight: var(--mdui-typescale-title-large-weight-emphasized);
  }
  &.title.medium {
    font-weight: var(--mdui-typescale-title-medium-weight-emphasized);
  }
  &.title.small {
    font-weight: var(--mdui-typescale-title-small-weight-emphasized);
  }
  &.label.large {
    font-weight: var(--mdui-typescale-label-large-weight-emphasized);
  }
  &.label.medium {
    font-weight: var(--mdui-typescale-label-medium-weight-emphasized);
  }
  &.label.small {
    font-weight: var(--mdui-typescale-label-small-weight-emphasized);
  }
  &.body.large {
    font-weight: var(--mdui-typescale-body-large-weight-emphasized);
  }
  &.body.medium {
    font-weight: var(--mdui-typescale-body-medium-weight-emphasized);
  }
  &.body.small {
    font-weight: var(--mdui-typescale-body-small-weight-emphasized);
  }
}