/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/styles.scss?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Light Theme */
.standard-light-theme {
  color-scheme: light;
  /* 1. Material Design token overrides */
  --mat-sys-primary: #f15b29;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffb185;
  --mat-sys-on-primary-container: #c63b00;
  --mat-sys-inverse-primary: #f5f5f5;
  --mat-sys-primary-fixed: #c8cdd4;
  --mat-sys-primary-fixed-dim: #f5f5f5;
  --mat-sys-on-primary-fixed: #50555c;
  --mat-sys-on-primary-fixed-variant: #ff00b3;
  --mat-sys-secondary: #27aae2;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #bdeaf9;
  --mat-sys-on-secondary-container: #165189;
  --mat-sys-secondary-fixed: #c8cdd4;
  --mat-sys-secondary-fixed-dim: #f5f5f5;
  --mat-sys-on-secondary-fixed: #50555c;
  --mat-sys-on-secondary-fixed-variant: #ff00b3;
  --mat-sys-tertiary: #aac09a;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #d9e7cc;
  --mat-sys-on-tertiary-container: #7d946e;
  --mat-sys-tertiary-fixed: #c8cdd4;
  --mat-sys-tertiary-fixed-dim: #f5f5f5;
  --mat-sys-on-tertiary-fixed: #50555c;
  --mat-sys-on-tertiary-fixed-variant: #ff00b3;
  --mat-sys-on-background: #50555c;
  --mat-sys-background: #ffffff;
  --mat-sys-surface: #f8f9fa;
  --mat-sys-surface-dim: #e6e8eb;
  --mat-sys-surface-bright: #ffffff;
  --mat-sys-surface-container-lowest: #f2f4f7;
  --mat-sys-surface-container-low: #f5f7fa;
  --mat-sys-surface-container: #f8f9fa;
  --mat-sys-surface-container-high: #fbfcfd;
  --mat-sys-surface-container-highest: #ffffff;
  --mat-sys-on-surface: #50555c;
  --mat-sys-shadow: #50555c;
  --mat-sys-scrim: #50555c;
  --mat-sys-surface-tint: #50555c;
  --mat-sys-inverse-surface: #f15b29;
  --mat-sys-inverse-on-surface: #ffffff;
  --mat-sys-outline: #c8cdd4;
  --mat-sys-outline-variant: #f15b29;
  --mat-sys-error: #ba1a1a;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error: #ffffff;
  --mat-sys-on-error-container: #50555c;
  --mat-sys-surface-variant: #f5f5f5;
  --mat-sys-on-surface-variant: #91979f;
  /* 2. Your custom semantic colors for light mode*/
  --color-info-bg: #9dd9c9;
  --color-info-fg: #147b5f;
  --color-info-secondary-bg: #c0eef9;
  --color-info-secondary-fg: #005c70;
  --color-success-bg: #b1e6bb;
  --color-success-fg: #146a2d;
  --color-warning-bg: #ffe699;
  --color-warning-fg: #7a5900;
  --color-error-bg: #f9bdbd;
  --color-error-fg: #a31212;
  --color-neutral-bg: #d1d1d1;
  --color-neutral-fg: #3a3a3a;
  --color-planned-bg: #d6dce6;
  --color-planned-fg: #2c3644;
}

/* Dark Theme */
.standard-dark-theme {
  color-scheme: dark;
  /* 1. Material Design token overrides */
  --mat-sys-primary: #f15b29;
  --mat-sys-on-primary: #f5f5f5;
  --mat-sys-primary-container: #ffb185;
  --mat-sys-on-primary-container: #c63b0e;
  --mat-sys-inverse-primary: #50555c;
  --mat-sys-primary-fixed: #50555c;
  --mat-sys-primary-fixed-dim: #50555c;
  --mat-sys-on-primary-fixed: #c8cdd4;
  --mat-sys-on-primary-fixed-variant: #c63b0e;
  --mat-sys-secondary: #27aae2;
  --mat-sys-on-secondary: #f5f5f5;
  --mat-sys-secondary-container: #bdeaf9;
  --mat-sys-on-secondary-container: #165189;
  --mat-sys-secondary-fixed: #50555c;
  --mat-sys-secondary-fixed-dim: #50555c;
  --mat-sys-on-secondary-fixed: #c8cdd4;
  --mat-sys-on-secondary-fixed-variant: #27aae2;
  --mat-sys-tertiary: #aac09a;
  --mat-sys-on-tertiary: #f5f5f5;
  --mat-sys-tertiary-container: #d9e7cc;
  --mat-sys-on-tertiary-container: #7d946e;
  --mat-sys-tertiary-fixed: #50555c;
  --mat-sys-tertiary-fixed-dim: #50555c;
  --mat-sys-on-tertiary-fixed: #c8cdd4;
  --mat-sys-on-tertiary-fixed-variant: #aac09a;
  --mat-sys-on-background: #f5f5f5;
  --mat-sys-background: #121417;
  --mat-sys-surface: #1e2226;
  --mat-sys-surface-dim: #3a3b41;
  --mat-sys-surface-bright: #3a3f45;
  --mat-sys-surface-container-lowest: #191d21;
  --mat-sys-surface-container-low: #202124;
  --mat-sys-surface-container: #303136;
  --mat-sys-surface-container-high: #3c3d44;
  --mat-sys-surface-container-highest: #41434a;
  --mat-sys-on-surface: #f5f5f5;
  --mat-sys-shadow: #0c1117;
  --mat-sys-scrim: #0c1117;
  --mat-sys-surface-tint: #50555c;
  --mat-sys-inverse-surface: #e7e1e0;
  --mat-sys-inverse-on-surface: #f15b29;
  --mat-sys-outline: #91979f;
  --mat-sys-outline-variant: #f15b29;
  --mat-sys-error: #ffdad6;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error: #ba1a1a;
  --mat-sys-on-error-container: #0c1117;
  --mat-sys-surface-variant: #50555c;
  --mat-sys-on-surface-variant: #c8cdd4;
  /* 2. Custom semantic colors for dark mode */
  --color-info-bg: #9dd9c9;
  --color-info-fg: #147b5f;
  --color-info-secondary-bg: #005a87;
  --color-info-secondary-fg: #9ad3de;
  --color-success-bg: #0b4f21;
  --color-success-fg: #94d48f;
  --color-warning-bg: #665000;
  --color-warning-fg: #ffda76;
  --color-error-bg: #7a1212;
  --color-error-fg: #ff8a8a;
  --color-neutral-bg: #3a3a3a;
  --color-neutral-fg: #c0c0c0;
  --color-planned-bg: #2d3848;
  --color-planned-fg: #9db4cc;
}

/* High Contrast Theme */
.standard-high-contrast-theme {
  color-scheme: high-contrast;
  /* 1. Material Design token overrides */
  --mat-sys-primary: #000000;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffffff;
  --mat-sys-on-primary-container: #000000;
  --mat-sys-inverse-primary: #ffffff;
  --mat-sys-primary-fixed: #000000;
  --mat-sys-primary-fixed-dim: #000000;
  --mat-sys-on-primary-fixed: #ffffff;
  --mat-sys-on-primary-fixed-variant: #ffffff;
  --mat-sys-secondary: #000000;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffffff;
  --mat-sys-on-secondary-container: #000000;
  --mat-sys-secondary-fixed: #000000;
  --mat-sys-secondary-fixed-dim: #000000;
  --mat-sys-on-secondary-fixed: #ffffff;
  --mat-sys-on-secondary-fixed-variant: #ffffff;
  --mat-sys-tertiary: #000000;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffffff;
  --mat-sys-on-tertiary-container: #000000;
  --mat-sys-tertiary-fixed: #000000;
  --mat-sys-tertiary-fixed-dim: #000000;
  --mat-sys-on-tertiary-fixed: #ffffff;
  --mat-sys-on-tertiary-fixed-variant: #ffffff;
  --mat-sys-background: #000000;
  --mat-sys-on-background: #ffffff;
  --mat-sys-surface: #000000;
  --mat-sys-surface-dim: #000000;
  --mat-sys-surface-bright: #ffffff;
  --mat-sys-surface-container-lowest: #000000;
  --mat-sys-surface-container-low: #000000;
  --mat-sys-surface-container: #000000;
  --mat-sys-surface-container-high: #000000;
  --mat-sys-surface-container-highest: #000000;
  --mat-sys-on-surface: #ffffff;
  --mat-sys-shadow: #ffffff;
  --mat-sys-scrim: #ffffff;
  --mat-sys-surface-tint: #ffffff;
  --mat-sys-inverse-surface: #ffffff;
  --mat-sys-inverse-on-surface: #000000;
  --mat-sys-outline: #ffffff;
  --mat-sys-outline-variant: #ffffff;
  --mat-sys-error: #ff0000;
  --mat-sys-error-container: #ffffff;
  --mat-sys-on-error: #000000;
  --mat-sys-on-error-container: #ff0000;
  --mat-sys-surface-variant: #000000;
  --mat-sys-on-surface-variant: #ffffff;
  /* Custom semantic colors — high contrast versions */
  --color-info-bg: #004d40;
  --color-info-fg: #a0f0d1;
  --color-info-secondary-bg: #00313f;
  --color-info-secondary-fg: #7ce0ff;
  --color-success-bg: #004d00;
  --color-success-fg: #a6f0a6;
  --color-warning-bg: #665c00;
  --color-warning-fg: #fff576;
  --color-error-bg: #8b0000;
  --color-error-fg: #ffb3b3;
  --color-neutral-bg: #1e1e1e;
  --color-neutral-fg: #e0e0e0;
  --color-planned-bg: #1f2a3a;
  --color-planned-fg: #a9c1e0;
}

/* Light Theme */
.green-light-theme {
  color-scheme: light;
  --mat-sys-primary: #006b5e;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #97f3e2;
  --mat-sys-on-primary-container: #00201b;
  --mat-sys-inverse-primary: #7ad7c6;
  --mat-sys-primary-fixed: #97f3e2;
  --mat-sys-primary-fixed-dim: #7ad7c6;
  --mat-sys-on-primary-fixed: #00201b;
  --mat-sys-on-primary-fixed-variant: #005047;
  --mat-sys-secondary: #44655e;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #c6eae1;
  --mat-sys-on-secondary-container: #00201b;
  --mat-sys-secondary-fixed: #c6eae1;
  --mat-sys-secondary-fixed-dim: #abcec5;
  --mat-sys-on-secondary-fixed: #00201b;
  --mat-sys-on-secondary-fixed-variant: #2c4d46;
  --mat-sys-tertiary: #695392;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ebddff;
  --mat-sys-on-tertiary-container: #240c4a;
  --mat-sys-tertiary-fixed: #ebddff;
  --mat-sys-tertiary-fixed-dim: #d3bbff;
  --mat-sys-on-tertiary-fixed: #240c4a;
  --mat-sys-on-tertiary-fixed-variant: #503b78;
  --mat-sys-background: #f6faf8;
  --mat-sys-on-background: #181d1b;
  --mat-sys-surface: #f6faf8;
  --mat-sys-surface-dim: #d7dbd8;
  --mat-sys-surface-bright: #f6faf8;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-container: #ebefec;
  --mat-sys-surface-container-high: #e5e9e7;
  --mat-sys-surface-container-highest: #dfe3e1;
  --mat-sys-on-surface: #181d1b;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #006b5e;
  --mat-sys-inverse-surface: #2d3130;
  --mat-sys-inverse-on-surface: #eef2ef;
  --mat-sys-outline: #6e7a76;
  --mat-sys-outline-variant: #bdc9c5;
  --mat-sys-error: #ba1a1a;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error-container: #410002;
  --mat-sys-surface-variant: #d9e5e1;
  --mat-sys-on-surface-variant: #3e4946;
}

/* Dark Theme */
.green-dark-theme {
  color-scheme: dark;
  --mat-sys-primary: #7ad7c6;
  --mat-sys-on-primary: #003730;
  --mat-sys-primary-container: #005047;
  --mat-sys-on-primary-container: #97f3e2;
  --mat-sys-inverse-primary: #006b5e;
  --mat-sys-primary-fixed: #97f3e2;
  --mat-sys-primary-fixed-dim: #7ad7c6;
  --mat-sys-on-primary-fixed: #00201b;
  --mat-sys-on-primary-fixed-variant: #005047;
  --mat-sys-secondary: #abcec5;
  --mat-sys-on-secondary: #143630;
  --mat-sys-secondary-container: #2c4d46;
  --mat-sys-on-secondary-container: #c6eae1;
  --mat-sys-secondary-fixed: #c6eae1;
  --mat-sys-secondary-fixed-dim: #abcec5;
  --mat-sys-on-secondary-fixed: #00201b;
  --mat-sys-on-secondary-fixed-variant: #2c4d46;
  --mat-sys-tertiary: #d3bbff;
  --mat-sys-on-tertiary: #392460;
  --mat-sys-tertiary-container: #503b78;
  --mat-sys-on-tertiary-container: #ebddff;
  --mat-sys-tertiary-fixed: #ebddff;
  --mat-sys-tertiary-fixed-dim: #d3bbff;
  --mat-sys-on-tertiary-fixed: #240c4a;
  --mat-sys-on-tertiary-fixed-variant: #503b78;
  --mat-sys-background: #101413;
  --mat-sys-on-background: #dfe3e1;
  --mat-sys-surface: #101413;
  --mat-sys-surface-dim: #101413;
  --mat-sys-surface-bright: #353a39;
  --mat-sys-surface-container-lowest: #0a0f0e;
  --mat-sys-surface-container: #1c211f;
  --mat-sys-surface-container-high: #262b2a;
  --mat-sys-surface-container-highest: #313634;
  --mat-sys-on-surface: #dfe3e1;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #7ad7c6;
  --mat-sys-inverse-surface: #dfe3e1;
  --mat-sys-inverse-on-surface: #2d3130;
  --mat-sys-outline: #879390;
  --mat-sys-outline-variant: #3e4946;
  --mat-sys-error: #ffb4ab;
  --mat-sys-on-error: #690005;
  --mat-sys-error-container: #93000a;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-surface-variant: #3e4946;
  --mat-sys-on-surface-variant: #bdc9c5;
}

/* High Contrast Theme */
.green-high-contrast-theme {
  color-scheme: high-contrast;
  --mat-sys-primary: #000000;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffffff;
  --mat-sys-on-primary-container: #000000;
  --mat-sys-inverse-primary: #ffffff;
  --mat-sys-primary-fixed: #000000;
  --mat-sys-primary-fixed-dim: #000000;
  --mat-sys-on-primary-fixed: #ffffff;
  --mat-sys-on-primary-fixed-variant: #ffffff;
  --mat-sys-secondary: #000000;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffffff;
  --mat-sys-on-secondary-container: #000000;
  --mat-sys-secondary-fixed: #000000;
  --mat-sys-secondary-fixed-dim: #000000;
  --mat-sys-on-secondary-fixed: #ffffff;
  --mat-sys-on-secondary-fixed-variant: #ffffff;
  --mat-sys-tertiary: #000000;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffffff;
  --mat-sys-on-tertiary-container: #000000;
  --mat-sys-tertiary-fixed: #000000;
  --mat-sys-tertiary-fixed-dim: #000000;
  --mat-sys-on-tertiary-fixed: #ffffff;
  --mat-sys-on-tertiary-fixed-variant: #ffffff;
  --mat-sys-background: #000000;
  --mat-sys-on-background: #ffffff;
  --mat-sys-surface: #000000;
  --mat-sys-surface-dim: #000000;
  --mat-sys-surface-bright: #ffffff;
  --mat-sys-surface-container-lowest: #000000;
  --mat-sys-surface-container: #000000;
  --mat-sys-surface-container-high: #000000;
  --mat-sys-surface-container-highest: #000000;
  --mat-sys-on-surface: #ffffff;
  --mat-sys-shadow: #ffffff;
  --mat-sys-scrim: #ffffff;
  --mat-sys-surface-tint: #ffffff;
  --mat-sys-inverse-surface: #ffffff;
  --mat-sys-inverse-on-surface: #000000;
  --mat-sys-outline: #ffffff;
  --mat-sys-outline-variant: #ffffff;
  --mat-sys-error: #ff0000;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffffff;
  --mat-sys-on-error-container: #ff0000;
  --mat-sys-surface-variant: #000000;
  --mat-sys-on-surface-variant: #ffffff;
}

/* Light Theme */
.orange-light-theme {
  color-scheme: light;
  --mat-sys-primary: #e65100;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffdbcf;
  --mat-sys-on-primary-container: #380d00;
  --mat-sys-inverse-primary: #ffb59a;
  --mat-sys-primary-fixed: #ffdbcf;
  --mat-sys-primary-fixed-dim: #ffb59a;
  --mat-sys-on-primary-fixed: #380d00;
  --mat-sys-on-primary-fixed-variant: #802a00;
  --mat-sys-secondary: #994523;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffdbcf;
  --mat-sys-on-secondary-container: #380d00;
  --mat-sys-secondary-fixed: #ffdbcf;
  --mat-sys-secondary-fixed-dim: #ffb59a;
  --mat-sys-on-secondary-fixed: #380d00;
  --mat-sys-on-secondary-fixed-variant: #7b2f0e;
  --mat-sys-tertiary: #6e5e00;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #fee266;
  --mat-sys-on-tertiary-container: #221b00;
  --mat-sys-tertiary-fixed: #fee266;
  --mat-sys-tertiary-fixed-dim: #e0c64d;
  --mat-sys-on-tertiary-fixed: #221b00;
  --mat-sys-on-tertiary-fixed-variant: #534600;
  --mat-sys-background: #fff8f6;
  --mat-sys-on-background: #271813;
  --mat-sys-surface: #fff8f6;
  --mat-sys-surface-dim: #f0d4cb;
  --mat-sys-surface-bright: #fff8f6;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-container: #ffe9e2;
  --mat-sys-surface-container-high: #fee2d9;
  --mat-sys-surface-container-highest: #f9ddd3;
  --mat-sys-on-surface: #271813;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #e65100;
  --mat-sys-inverse-surface: #3d2d27;
  --mat-sys-inverse-on-surface: #ffede7;
  --mat-sys-outline: #8f7066;
  --mat-sys-outline-variant: #e3bfb2;
  --mat-sys-error: #ba1a1a;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error-container: #410002;
  --mat-sys-surface-variant: #ffdbcf;
  --mat-sys-on-surface-variant: #5a4138;
}

/* Dark Theme */
.orange-dark-theme {
  color-scheme: dark;
  --mat-sys-primary: #ffb59a;
  --mat-sys-on-primary: #5b1b00;
  --mat-sys-primary-container: #802a00;
  --mat-sys-on-primary-container: #ffdbcf;
  --mat-sys-inverse-primary: #e65100;
  --mat-sys-primary-fixed: #ffdbcf;
  --mat-sys-primary-fixed-dim: #ffb59a;
  --mat-sys-on-primary-fixed: #380d00;
  --mat-sys-on-primary-fixed-variant: #802a00;
  --mat-sys-secondary: #ffb59a;
  --mat-sys-on-secondary: #5b1b00;
  --mat-sys-secondary-container: #7b2f0e;
  --mat-sys-on-secondary-container: #ffdbcf;
  --mat-sys-secondary-fixed: #ffdbcf;
  --mat-sys-secondary-fixed-dim: #ffb59a;
  --mat-sys-on-secondary-fixed: #380d00;
  --mat-sys-on-secondary-fixed-variant: #7b2f0e;
  --mat-sys-tertiary: #e0c64d;
  --mat-sys-on-tertiary: #3a3000;
  --mat-sys-tertiary-container: #534600;
  --mat-sys-on-tertiary-container: #fee266;
  --mat-sys-tertiary-fixed: #fee266;
  --mat-sys-tertiary-fixed-dim: #e0c64d;
  --mat-sys-on-tertiary-fixed: #221b00;
  --mat-sys-on-tertiary-fixed-variant: #534600;
  --mat-sys-background: #1d100b;
  --mat-sys-on-background: #f9ddd3;
  --mat-sys-surface: #1d100b;
  --mat-sys-surface-dim: #1d100b;
  --mat-sys-surface-bright: #47352f;
  --mat-sys-surface-container-lowest: #180b07;
  --mat-sys-surface-container: #2b1c17;
  --mat-sys-surface-container-high: #362621;
  --mat-sys-surface-container-highest: #42312b;
  --mat-sys-on-surface: #f9ddd3;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #ffb59a;
  --mat-sys-inverse-surface: #f9ddd3;
  --mat-sys-inverse-on-surface: #3d2d27;
  --mat-sys-outline: #aa8a7e;
  --mat-sys-outline-variant: #5a4138;
  --mat-sys-error: #ffb4ab;
  --mat-sys-on-error: #690005;
  --mat-sys-error-container: #93000a;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-surface-variant: #5a4138;
  --mat-sys-on-surface-variant: #e3bfb2;
}

/* High Contrast Theme */
.orange-high-contrast-theme {
  color-scheme: high-contrast;
  --mat-sys-primary: #000000;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffffff;
  --mat-sys-on-primary-container: #000000;
  --mat-sys-inverse-primary: #ffffff;
  --mat-sys-primary-fixed: #000000;
  --mat-sys-primary-fixed-dim: #000000;
  --mat-sys-on-primary-fixed: #ffffff;
  --mat-sys-on-primary-fixed-variant: #ffffff;
  --mat-sys-secondary: #000000;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffffff;
  --mat-sys-on-secondary-container: #000000;
  --mat-sys-secondary-fixed: #000000;
  --mat-sys-secondary-fixed-dim: #000000;
  --mat-sys-on-secondary-fixed: #ffffff;
  --mat-sys-on-secondary-fixed-variant: #ffffff;
  --mat-sys-tertiary: #000000;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffffff;
  --mat-sys-on-tertiary-container: #000000;
  --mat-sys-tertiary-fixed: #000000;
  --mat-sys-tertiary-fixed-dim: #000000;
  --mat-sys-on-tertiary-fixed: #ffffff;
  --mat-sys-on-tertiary-fixed-variant: #ffffff;
  --mat-sys-background: #000000;
  --mat-sys-on-background: #ffffff;
  --mat-sys-surface: #000000;
  --mat-sys-surface-dim: #000000;
  --mat-sys-surface-bright: #ffffff;
  --mat-sys-surface-container-lowest: #000000;
  --mat-sys-surface-container: #000000;
  --mat-sys-surface-container-high: #000000;
  --mat-sys-surface-container-highest: #000000;
  --mat-sys-on-surface: #ffffff;
  --mat-sys-shadow: #ffffff;
  --mat-sys-scrim: #ffffff;
  --mat-sys-surface-tint: #ffffff;
  --mat-sys-inverse-surface: #ffffff;
  --mat-sys-inverse-on-surface: #000000;
  --mat-sys-outline: #ffffff;
  --mat-sys-outline-variant: #ffffff;
  --mat-sys-error: #ff0000;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffffff;
  --mat-sys-on-error-container: #ff0000;
  --mat-sys-surface-variant: #000000;
  --mat-sys-on-surface-variant: #ffffff;
}

/* These tokens are generated using https://themes.angular-material.dev/ */
/* Preview: https://themes.angular-material.dev/?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 */
/* Light Theme */
.purple-light-theme {
  color-scheme: light;
  --mat-sys-primary: #6750a4;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #e9ddff;
  --mat-sys-on-primary-container: #22005d;
  --mat-sys-inverse-primary: #cfbcff;
  --mat-sys-primary-fixed: #e9ddff;
  --mat-sys-primary-fixed-dim: #cfbcff;
  --mat-sys-on-primary-fixed: #22005d;
  --mat-sys-on-primary-fixed-variant: #4f378a;
  --mat-sys-secondary: #625b70;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #e8def8;
  --mat-sys-on-secondary-container: #1e192b;
  --mat-sys-secondary-fixed: #e8def8;
  --mat-sys-secondary-fixed-dim: #ccc2db;
  --mat-sys-on-secondary-fixed: #1e192b;
  --mat-sys-on-secondary-fixed-variant: #4a4458;
  --mat-sys-tertiary: #7e5260;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffd9e3;
  --mat-sys-on-tertiary-container: #31101d;
  --mat-sys-tertiary-fixed: #ffd9e3;
  --mat-sys-tertiary-fixed-dim: #efb8c8;
  --mat-sys-on-tertiary-fixed: #31101d;
  --mat-sys-on-tertiary-fixed-variant: #633b48;
  --mat-sys-background: #fdf8f8;
  --mat-sys-on-background: #1c1b1c;
  --mat-sys-surface: #fdf8f8;
  --mat-sys-surface-dim: #ddd9d9;
  --mat-sys-surface-bright: #fdf8f8;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-container-low: #f7f3f2;
  --mat-sys-surface-container: #f1eded;
  --mat-sys-surface-container-high: #ebe7e7;
  --mat-sys-surface-container-highest: #e6e1e1;
  --mat-sys-on-surface: #1c1b1c;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #605d62;
  --mat-sys-inverse-surface: #313030;
  --mat-sys-inverse-on-surface: #f4f0f0;
  --mat-sys-outline: #79767b;
  --mat-sys-outline-variant: #cac5cb;
  --mat-sys-error: #ba1a1a;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error: #ffffff;
  --mat-sys-on-error-container: #410002;
  --mat-sys-surface-variant: #e6e1e7;
  --mat-sys-on-surface-variant: #48464b;
}

/* Dark Theme */
.purple-dark-theme {
  color-scheme: dark;
  --mat-sys-primary: #cfbcff;
  --mat-sys-on-primary: #381e72;
  --mat-sys-primary-container: #4f378a;
  --mat-sys-on-primary-container: #e9ddff;
  --mat-sys-inverse-primary: #6750a4;
  --mat-sys-primary-fixed: #e9ddff;
  --mat-sys-primary-fixed-dim: #cfbcff;
  --mat-sys-on-primary-fixed: #22005d;
  --mat-sys-on-primary-fixed-variant: #4f378a;
  --mat-sys-secondary: #ccc2db;
  --mat-sys-on-secondary: #332d40;
  --mat-sys-secondary-container: #4a4458;
  --mat-sys-on-secondary-container: #e8def8;
  --mat-sys-secondary-fixed: #e8def8;
  --mat-sys-secondary-fixed-dim: #ccc2db;
  --mat-sys-on-secondary-fixed: #1e192b;
  --mat-sys-on-secondary-fixed-variant: #4a4458;
  --mat-sys-tertiary: #efb8c8;
  --mat-sys-on-tertiary: #4a2532;
  --mat-sys-tertiary-container: #633b48;
  --mat-sys-on-tertiary-container: #ffd9e3;
  --mat-sys-tertiary-fixed: #ffd9e3;
  --mat-sys-tertiary-fixed-dim: #efb8c8;
  --mat-sys-on-tertiary-fixed: #31101d;
  --mat-sys-on-tertiary-fixed-variant: #633b48;
  --mat-sys-background: #141313;
  --mat-sys-on-background: #e6e1e1;
  --mat-sys-surface: #141313;
  --mat-sys-surface-dim: #141313;
  --mat-sys-surface-bright: #3a3939;
  --mat-sys-surface-container-lowest: #0f0e0e;
  --mat-sys-surface-container-low: #1c1b1c;
  --mat-sys-surface-container: #201f20;
  --mat-sys-surface-container-high: #2b2a2a;
  --mat-sys-surface-container-highest: #363435;
  --mat-sys-on-surface: #e6e1e1;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #cac5ca;
  --mat-sys-inverse-surface: #e6e1e1;
  --mat-sys-inverse-on-surface: #313030;
  --mat-sys-outline: #938f95;
  --mat-sys-outline-variant: #48464b;
  --mat-sys-error: #ffb4ab;
  --mat-sys-error-container: #93000a;
  --mat-sys-on-error: #690005;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-surface-variant: #48464b;
  --mat-sys-on-surface-variant: #cac5cb;
}

/* High Contrast Theme */
.purple-high-contrast-theme {
  color-scheme: high-contrast;
  --mat-sys-primary: #000000;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffffff;
  --mat-sys-on-primary-container: #000000;
  --mat-sys-inverse-primary: #ffffff;
  --mat-sys-primary-fixed: #000000;
  --mat-sys-primary-fixed-dim: #000000;
  --mat-sys-on-primary-fixed: #ffffff;
  --mat-sys-on-primary-fixed-variant: #ffffff;
  --mat-sys-secondary: #000000;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffffff;
  --mat-sys-on-secondary-container: #000000;
  --mat-sys-secondary-fixed: #000000;
  --mat-sys-secondary-fixed-dim: #000000;
  --mat-sys-on-secondary-fixed: #ffffff;
  --mat-sys-on-secondary-fixed-variant: #ffffff;
  --mat-sys-tertiary: #000000;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffffff;
  --mat-sys-on-tertiary-container: #000000;
  --mat-sys-tertiary-fixed: #000000;
  --mat-sys-tertiary-fixed-dim: #000000;
  --mat-sys-on-tertiary-fixed: #ffffff;
  --mat-sys-on-tertiary-fixed-variant: #ffffff;
  --mat-sys-background: #000000;
  --mat-sys-on-background: #ffffff;
  --mat-sys-surface: #000000;
  --mat-sys-surface-dim: #000000;
  --mat-sys-surface-bright: #ffffff;
  --mat-sys-surface-container-lowest: #000000;
  --mat-sys-surface-container: #000000;
  --mat-sys-surface-container-high: #000000;
  --mat-sys-surface-container-highest: #000000;
  --mat-sys-on-surface: #ffffff;
  --mat-sys-shadow: #ffffff;
  --mat-sys-scrim: #ffffff;
  --mat-sys-surface-tint: #ffffff;
  --mat-sys-inverse-surface: #ffffff;
  --mat-sys-inverse-on-surface: #000000;
  --mat-sys-outline: #ffffff;
  --mat-sys-outline-variant: #ffffff;
  --mat-sys-error: #ff0000;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffffff;
  --mat-sys-on-error-container: #ff0000;
  --mat-sys-surface-variant: #000000;
  --mat-sys-on-surface-variant: #ffffff;
}

/* Light Theme */
.red-light-theme {
  color-scheme: light;
  --mat-sys-primary: #b90c55;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffd9df;
  --mat-sys-on-primary-container: #3f0018;
  --mat-sys-inverse-primary: #ffb1c2;
  --mat-sys-primary-fixed: #ffd9df;
  --mat-sys-primary-fixed-dim: #ffb1c2;
  --mat-sys-on-primary-fixed: #3f0018;
  --mat-sys-on-primary-fixed-variant: #8f003f;
  --mat-sys-secondary: #9c3e59;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffd9df;
  --mat-sys-on-secondary-container: #3f0018;
  --mat-sys-secondary-fixed: #ffd9df;
  --mat-sys-secondary-fixed-dim: #ffb1c2;
  --mat-sys-on-secondary-fixed: #3f0018;
  --mat-sys-on-secondary-fixed-variant: #7e2642;
  --mat-sys-tertiary: #aa3700;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffdbcf;
  --mat-sys-on-tertiary-container: #380d00;
  --mat-sys-tertiary-fixed: #ffdbcf;
  --mat-sys-tertiary-fixed-dim: #ffb59b;
  --mat-sys-on-tertiary-fixed: #380d00;
  --mat-sys-on-tertiary-fixed-variant: #822800;
  --mat-sys-background: #fff8f7;
  --mat-sys-on-background: #26181b;
  --mat-sys-surface: #fff8f7;
  --mat-sys-surface-dim: #eed4d7;
  --mat-sys-surface-bright: #fff8f7;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-container: #ffe8eb;
  --mat-sys-surface-container-high: #fde2e5;
  --mat-sys-surface-container-highest: #f7dce0;
  --mat-sys-on-surface: #26181b;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #b90c55;
  --mat-sys-inverse-surface: #3d2c2f;
  --mat-sys-inverse-on-surface: #ffecee;
  --mat-sys-outline: #8d6f75;
  --mat-sys-outline-variant: #e1bec4;
  --mat-sys-error: #ba1a1a;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error-container: #410002;
  --mat-sys-surface-variant: #fed9df;
  --mat-sys-on-surface-variant: #594045;
}

/* Dark Theme */
.red-dark-theme {
  color-scheme: dark;
  --mat-sys-primary: #ffb1c2;
  --mat-sys-on-primary: #66002b;
  --mat-sys-primary-container: #8f003f;
  --mat-sys-on-primary-container: #ffd9df;
  --mat-sys-inverse-primary: #b90c55;
  --mat-sys-primary-fixed: #ffd9df;
  --mat-sys-primary-fixed-dim: #ffb1c2;
  --mat-sys-on-primary-fixed: #3f0018;
  --mat-sys-on-primary-fixed-variant: #8f003f;
  --mat-sys-secondary: #ffb1c2;
  --mat-sys-on-secondary: #600e2c;
  --mat-sys-secondary-container: #7e2642;
  --mat-sys-on-secondary-container: #ffd9df;
  --mat-sys-secondary-fixed: #ffd9df;
  --mat-sys-secondary-fixed-dim: #ffb1c2;
  --mat-sys-on-secondary-fixed: #3f0018;
  --mat-sys-on-secondary-fixed-variant: #7e2642;
  --mat-sys-tertiary: #ffb59b;
  --mat-sys-on-tertiary: #5c1a00;
  --mat-sys-tertiary-container: #822800;
  --mat-sys-on-tertiary-container: #ffdbcf;
  --mat-sys-tertiary-fixed: #ffdbcf;
  --mat-sys-tertiary-fixed-dim: #ffb59b;
  --mat-sys-on-tertiary-fixed: #380d00;
  --mat-sys-on-tertiary-fixed-variant: #822800;
  --mat-sys-background: #1d1012;
  --mat-sys-on-background: #f7dce0;
  --mat-sys-surface: #1d1012;
  --mat-sys-surface-dim: #1d1012;
  --mat-sys-surface-bright: #463538;
  --mat-sys-surface-container-lowest: #170a0d;
  --mat-sys-surface-container: #2b1c1f;
  --mat-sys-surface-container-high: #362629;
  --mat-sys-surface-container-highest: #413034;
  --mat-sys-on-surface: #f7dce0;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #ffb1c2;
  --mat-sys-inverse-surface: #f7dce0;
  --mat-sys-inverse-on-surface: #3d2c2f;
  --mat-sys-outline: #a8898e;
  --mat-sys-outline-variant: #594045;
  --mat-sys-error: #ffb4ab;
  --mat-sys-on-error: #690005;
  --mat-sys-error-container: #93000a;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-surface-variant: #594045;
  --mat-sys-on-surface-variant: #e1bec4;
}

/* High Contrast Theme */
.red-high-contrast-theme {
  color-scheme: high-contrast;
  --mat-sys-primary: #000000;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffffff;
  --mat-sys-on-primary-container: #000000;
  --mat-sys-inverse-primary: #ffffff;
  --mat-sys-primary-fixed: #000000;
  --mat-sys-primary-fixed-dim: #000000;
  --mat-sys-on-primary-fixed: #ffffff;
  --mat-sys-on-primary-fixed-variant: #ffffff;
  --mat-sys-secondary: #000000;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffffff;
  --mat-sys-on-secondary-container: #000000;
  --mat-sys-secondary-fixed: #000000;
  --mat-sys-secondary-fixed-dim: #000000;
  --mat-sys-on-secondary-fixed: #ffffff;
  --mat-sys-on-secondary-fixed-variant: #ffffff;
  --mat-sys-tertiary: #000000;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffffff;
  --mat-sys-on-tertiary-container: #000000;
  --mat-sys-tertiary-fixed: #000000;
  --mat-sys-tertiary-fixed-dim: #000000;
  --mat-sys-on-tertiary-fixed: #ffffff;
  --mat-sys-on-tertiary-fixed-variant: #ffffff;
  --mat-sys-background: #000000;
  --mat-sys-on-background: #ffffff;
  --mat-sys-surface: #000000;
  --mat-sys-surface-dim: #000000;
  --mat-sys-surface-bright: #ffffff;
  --mat-sys-surface-container-lowest: #000000;
  --mat-sys-surface-container: #000000;
  --mat-sys-surface-container-high: #000000;
  --mat-sys-surface-container-highest: #000000;
  --mat-sys-on-surface: #ffffff;
  --mat-sys-shadow: #ffffff;
  --mat-sys-scrim: #ffffff;
  --mat-sys-surface-tint: #ffffff;
  --mat-sys-inverse-surface: #ffffff;
  --mat-sys-inverse-on-surface: #000000;
  --mat-sys-outline: #ffffff;
  --mat-sys-outline-variant: #ffffff;
  --mat-sys-error: #ff0000;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffffff;
  --mat-sys-on-error-container: #ff0000;
  --mat-sys-surface-variant: #000000;
  --mat-sys-on-surface-variant: #ffffff;
}

/* Light Theme */
.deep-blue-light-theme {
  color-scheme: light;
  --mat-sys-primary: #005faf;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #d4e3ff;
  --mat-sys-on-primary-container: #001c3a;
  --mat-sys-inverse-primary: #a5c8ff;
  --mat-sys-primary-fixed: #d4e3ff;
  --mat-sys-primary-fixed-dim: #a5c8ff;
  --mat-sys-on-primary-fixed: #001c3a;
  --mat-sys-on-primary-fixed-variant: #004786;
  --mat-sys-secondary: #475f84;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #d4e3ff;
  --mat-sys-on-secondary-container: #001c3a;
  --mat-sys-secondary-fixed: #d4e3ff;
  --mat-sys-secondary-fixed-dim: #afc8f1;
  --mat-sys-on-secondary-fixed: #001c3a;
  --mat-sys-on-secondary-fixed-variant: #2f486a;
  --mat-sys-tertiary: #8540a1;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #f9d8ff;
  --mat-sys-on-tertiary-container: #320046;
  --mat-sys-tertiary-fixed: #f9d8ff;
  --mat-sys-tertiary-fixed-dim: #edb1ff;
  --mat-sys-on-tertiary-fixed: #320046;
  --mat-sys-on-tertiary-fixed-variant: #6b2687;
  --mat-sys-background: #f9f9ff;
  --mat-sys-on-background: #181c21;
  --mat-sys-surface: #f9f9ff;
  --mat-sys-surface-dim: #d8dae2;
  --mat-sys-surface-bright: #f9f9ff;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-container: #ecedf6;
  --mat-sys-surface-container-high: #e6e8f0;
  --mat-sys-surface-container-highest: #e0e2ea;
  --mat-sys-on-surface: #181c21;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #005faf;
  --mat-sys-inverse-surface: #2d3037;
  --mat-sys-inverse-on-surface: #eff0f9;
  --mat-sys-outline: #717783;
  --mat-sys-outline-variant: #c1c6d4;
  --mat-sys-error: #ba1a1a;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-on-error-container: #410002;
  --mat-sys-surface-variant: #dde2f0;
  --mat-sys-on-surface-variant: #414752;
}

/* Dark Theme */
.deep-blue-dark-theme {
  color-scheme: dark;
  --mat-sys-primary: #005faf;
  --mat-sys-on-primary: #00315f;
  --mat-sys-primary-container: #004786;
  --mat-sys-on-primary-container: #d4e3ff;
  --mat-sys-inverse-primary: #a5c8ff;
  --mat-sys-primary-fixed: #d4e3ff;
  --mat-sys-primary-fixed-dim: #a5c8ff;
  --mat-sys-on-primary-fixed: #001c3a;
  --mat-sys-on-primary-fixed-variant: #004786;
  --mat-sys-secondary: #afc8f1;
  --mat-sys-on-secondary: #163153;
  --mat-sys-secondary-container: #2f486a;
  --mat-sys-on-secondary-container: #d4e3ff;
  --mat-sys-secondary-fixed: #d4e3ff;
  --mat-sys-secondary-fixed-dim: #afc8f1;
  --mat-sys-on-secondary-fixed: #001c3a;
  --mat-sys-on-secondary-fixed-variant: #2f486a;
  --mat-sys-tertiary: #edb1ff;
  --mat-sys-on-tertiary: #52046e;
  --mat-sys-tertiary-container: #6b2687;
  --mat-sys-on-tertiary-container: #f9d8ff;
  --mat-sys-tertiary-fixed: #f9d8ff;
  --mat-sys-tertiary-fixed-dim: #edb1ff;
  --mat-sys-on-tertiary-fixed: #320046;
  --mat-sys-on-tertiary-fixed-variant: #6b2687;
  --mat-sys-background: #101319;
  --mat-sys-on-background: #e0e2ea;
  --mat-sys-surface: #101319;
  --mat-sys-surface-dim: #101319;
  --mat-sys-surface-bright: #363940;
  --mat-sys-surface-container-lowest: #0b0e14;
  --mat-sys-surface-container: #1c2026;
  --mat-sys-surface-container-high: #272a30;
  --mat-sys-surface-container-highest: #32353b;
  --mat-sys-on-surface: #e0e2ea;
  --mat-sys-shadow: #000000;
  --mat-sys-scrim: #000000;
  --mat-sys-surface-tint: #a5c8ff;
  --mat-sys-inverse-surface: #e0e2ea;
  --mat-sys-inverse-on-surface: #2d3037;
  --mat-sys-outline: #8b919e;
  --mat-sys-outline-variant: #414752;
  --mat-sys-error: #ffb4ab;
  --mat-sys-on-error: #690005;
  --mat-sys-error-container: #93000a;
  --mat-sys-on-error-container: #ffdad6;
  --mat-sys-surface-variant: #414752;
  --mat-sys-on-surface-variant: #c1c6d4;
}

/* High Contrast Theme */
.deep-blue-high-contrast-theme {
  color-scheme: high-contrast;
  --mat-sys-primary: #000000;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #ffffff;
  --mat-sys-on-primary-container: #000000;
  --mat-sys-inverse-primary: #ffffff;
  --mat-sys-primary-fixed: #000000;
  --mat-sys-primary-fixed-dim: #000000;
  --mat-sys-on-primary-fixed: #ffffff;
  --mat-sys-on-primary-fixed-variant: #ffffff;
  --mat-sys-secondary: #000000;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-secondary-container: #ffffff;
  --mat-sys-on-secondary-container: #000000;
  --mat-sys-secondary-fixed: #000000;
  --mat-sys-secondary-fixed-dim: #000000;
  --mat-sys-on-secondary-fixed: #ffffff;
  --mat-sys-on-secondary-fixed-variant: #ffffff;
  --mat-sys-tertiary: #000000;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-tertiary-container: #ffffff;
  --mat-sys-on-tertiary-container: #000000;
  --mat-sys-tertiary-fixed: #000000;
  --mat-sys-tertiary-fixed-dim: #000000;
  --mat-sys-on-tertiary-fixed: #ffffff;
  --mat-sys-on-tertiary-fixed-variant: #ffffff;
  --mat-sys-background: #000000;
  --mat-sys-on-background: #ffffff;
  --mat-sys-surface: #000000;
  --mat-sys-surface-dim: #000000;
  --mat-sys-surface-bright: #ffffff;
  --mat-sys-surface-container-lowest: #000000;
  --mat-sys-surface-container: #000000;
  --mat-sys-surface-container-high: #000000;
  --mat-sys-surface-container-highest: #000000;
  --mat-sys-on-surface: #ffffff;
  --mat-sys-shadow: #ffffff;
  --mat-sys-scrim: #ffffff;
  --mat-sys-surface-tint: #ffffff;
  --mat-sys-inverse-surface: #ffffff;
  --mat-sys-inverse-on-surface: #000000;
  --mat-sys-outline: #ffffff;
  --mat-sys-outline-variant: #ffffff;
  --mat-sys-error: #ff0000;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #ffffff;
  --mat-sys-on-error-container: #ff0000;
  --mat-sys-surface-variant: #000000;
  --mat-sys-on-surface-variant: #ffffff;
}

/* Open Sans font faces */
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans/open-sans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans/open-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans/open-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans/open-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans/open-sans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Roboto font faces */
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/roboto-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Add other weights/styles as needed */
:root {
  --mat-card-elevated-container-shape: 4px;
  --mat-button-filled-container-shape: 4px;
  --mat-button-toggle-shape: 4px;
  --mat-list-list-item-container-shape: 4px;
  --mat-list-active-indicator-shape: 4px;
  --mat-chip-container-shape-radius: 4px;
}

/* Splash Screen Styles */
#splash-screen {
  position: fixed;
  inset: 0;
  background: white; /* matches your default light theme background */
  z-index: 9999;
  display: flex;
  flex-direction: column; /* vertical stack: spinner on top, branding underneath */
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.splash-spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #ccc;
  border-top-color: var(--mat-sys-primary);
  border-radius: 50%;
  animation: splash-spin 1s linear infinite;
  margin-bottom: 12px; /* spacing between spinner and branding text */
}

.splash-branding {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5); /* subtle gray */
  font-family: "Roboto", sans-serif;
  text-align: center;
}

@keyframes splash-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  #splash-screen {
    background: #121212;
  }
  .splash-spinner {
    border: 5px solid #444;
    border-top-color: var(--mat-sys-primary);
  }
  .splash-branding {
    color: rgba(255, 255, 255, 0.7);
  }
}
html, body, app-root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: var(--mat-sys-background);
  color: var(--mat-sys-on-background);
  transition: background-color 0.3s ease, color 0.3s ease;
}

html {
  --mat-sys-background: light-dark(#fef8fc, #151316);
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#f5eff4, #323033);
  --mat-sys-inverse-primary: light-dark(#d5baff, #7d00fa);
  --mat-sys-inverse-surface: light-dark(#323033, #e6e1e6);
  --mat-sys-on-background: light-dark(#1d1b1e, #e6e1e6);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #42008a);
  --mat-sys-on-primary-container: light-dark(#5f00c0, #ecdcff);
  --mat-sys-on-primary-fixed: light-dark(#270057, #270057);
  --mat-sys-on-primary-fixed-variant: light-dark(#5f00c0, #5f00c0);
  --mat-sys-on-secondary: light-dark(#ffffff, #352d40);
  --mat-sys-on-secondary-container: light-dark(#4b4357, #eadef7);
  --mat-sys-on-secondary-fixed: light-dark(#1f182a, #1f182a);
  --mat-sys-on-secondary-fixed-variant: light-dark(#4b4357, #4b4357);
  --mat-sys-on-surface: light-dark(#1d1b1e, #e6e1e6);
  --mat-sys-on-surface-variant: light-dark(#49454e, #e8e0eb);
  --mat-sys-on-tertiary: light-dark(#ffffff, #42008a);
  --mat-sys-on-tertiary-container: light-dark(#5f00c0, #ecdcff);
  --mat-sys-on-tertiary-fixed: light-dark(#270057, #270057);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#5f00c0, #5f00c0);
  --mat-sys-outline: light-dark(#7b757f, #958e99);
  --mat-sys-outline-variant: light-dark(#cbc4cf, #49454e);
  --mat-sys-primary: light-dark(#7d00fa, #d5baff);
  --mat-sys-primary-container: light-dark(#ecdcff, #5f00c0);
  --mat-sys-primary-fixed: light-dark(#ecdcff, #ecdcff);
  --mat-sys-primary-fixed-dim: light-dark(#d5baff, #d5baff);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#645b70, #cec2db);
  --mat-sys-secondary-container: light-dark(#eadef7, #4b4357);
  --mat-sys-secondary-fixed: light-dark(#eadef7, #eadef7);
  --mat-sys-secondary-fixed-dim: light-dark(#cec2db, #cec2db);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#fef8fc, #151316);
  --mat-sys-surface-bright: light-dark(#fef8fc, #3b383c);
  --mat-sys-surface-container: light-dark(#f2ecf1, #211f22);
  --mat-sys-surface-container-high: light-dark(#ede6eb, #2b292d);
  --mat-sys-surface-container-highest: light-dark(#e6e1e6, #363437);
  --mat-sys-surface-container-low: light-dark(#f8f2f6, #1d1b1e);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0f0d11);
  --mat-sys-surface-dim: light-dark(#ded8dd, #151316);
  --mat-sys-surface-tint: light-dark(#7d00fa, #d5baff);
  --mat-sys-surface-variant: light-dark(#e8e0eb, #49454e);
  --mat-sys-tertiary: light-dark(#7d00fa, #d5baff);
  --mat-sys-tertiary-container: light-dark(#ecdcff, #5f00c0);
  --mat-sys-tertiary-fixed: light-dark(#ecdcff, #ecdcff);
  --mat-sys-tertiary-fixed-dim: light-dark(#d5baff, #d5baff);
  --mat-sys-neutral-variant20: #332f37;
  --mat-sys-neutral10: #1d1b1e;
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 300 1rem / 1.5rem Roboto;
  --mat-sys-body-large-font: Roboto;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 300;
  --mat-sys-body-medium: 300 0.875rem / 1.25rem Roboto;
  --mat-sys-body-medium-font: Roboto;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 300;
  --mat-sys-body-small: 300 0.75rem / 1rem Roboto;
  --mat-sys-body-small-font: Roboto;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 300;
  --mat-sys-display-large: 300 3.562rem / 4rem Open Sans;
  --mat-sys-display-large-font: Open Sans;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 300;
  --mat-sys-display-medium: 300 2.812rem / 3.25rem Open Sans;
  --mat-sys-display-medium-font: Open Sans;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 300;
  --mat-sys-display-small: 300 2.25rem / 2.75rem Open Sans;
  --mat-sys-display-small-font: Open Sans;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 300;
  --mat-sys-headline-large: 300 2rem / 2.5rem Open Sans;
  --mat-sys-headline-large-font: Open Sans;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 300;
  --mat-sys-headline-medium: 300 1.75rem / 2.25rem Open Sans;
  --mat-sys-headline-medium-font: Open Sans;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 300;
  --mat-sys-headline-small: 300 1.5rem / 2rem Open Sans;
  --mat-sys-headline-small-font: Open Sans;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 300;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-label-large-font: Roboto;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 900;
  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
  --mat-sys-label-medium-font: Roboto;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 900;
  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
  --mat-sys-label-small-font: Roboto;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 300 1.375rem / 1.75rem Open Sans;
  --mat-sys-title-large-font: Open Sans;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 300;
  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
  --mat-sys-title-medium-font: Roboto;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-title-small-font: Roboto;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}

/* =====================================================================
 * TEMPORARY LAYOUT DEBUG HELPERS
 * ---------------------------------------------------------------------
 * Purpose: Visualize which container is constraining height / overflow.
 * Usage : Add class "layout-debug" to the <app-root> element (or <body>)
 *         to enable all outlines. Remove the class (or this block) when
 *         done debugging. Safe to keep committed while disabled.
 * ---------------------------------------------------------------------
 * Example enable (in index.html or via host binding):
 *   <app-root class="layout-debug"></app-root>
 * ---------------------------------------------------------------------
 * Color legend:
 *   Pink    = high-level app shells
 *   Orange  = task registration / view containers
 *   Blue    = task output layout zones
 *   Green   = action panel wrapper & body
 *   Purple  = tiles scroll area
 *   Red     = individual tiles / actionable elements
 * ===================================================================== */
.layout-debug {
  /* Generic reset to make bounds obvious */
  /* If the class is on body, this outlines the app shell; if the class is directly on app-root we add an extra rule below */
  /* Shade scrollable regions to spot unintended scroll containers */
  /* Highlight elements introducing overflow clipping */
  /* Utility: show current size inline (opt-in by adding data-debug-dim attr) */
}
.layout-debug *:not(mat-icon) {
  box-sizing: border-box;
}
.layout-debug app-root {
  outline: 2px solid rgba(255, 105, 180, 0.6);
}
.layout-debug app-task-registration,
.layout-debug .task-view {
  outline: 2px dashed rgba(255, 165, 0, 0.6);
}
.layout-debug app-task-output,
.layout-debug .output-layout {
  outline: 2px solid rgba(30, 144, 255, 0.6);
}
.layout-debug action-panel {
  outline: 2px solid rgba(50, 205, 50, 0.7);
  position: relative;
}
.layout-debug action-panel .panel-body {
  outline: 1px dashed rgba(34, 139, 34, 0.7);
}
.layout-debug action-panel .tiles-scroll {
  outline: 2px dotted rgba(138, 43, 226, 0.65);
}
.layout-debug action-panel .tiles-grid {
  outline: 1px dotted rgba(186, 85, 211, 0.6);
}
.layout-debug action-panel .tile,
.layout-debug action-panel button.action-btn {
  outline: 1px solid rgba(255, 0, 0, 0.5);
}
.layout-debug .tiles-scroll {
  background: repeating-linear-gradient(45deg, rgba(138, 43, 226, 0.08) 0 12px, rgba(138, 43, 226, 0.16) 12px 24px);
}
.layout-debug .mat-mdc-table,
.layout-debug table {
  background: repeating-linear-gradient(135deg, rgba(30, 144, 255, 0.06) 0 10px, rgba(30, 144, 255, 0.12) 10px 20px);
}
.layout-debug [style*=overflow],
.layout-debug [class*=overflow] {
  outline: 2px solid rgba(255, 0, 0, 0.4);
}
.layout-debug [data-debug-dim]::after {
  content: attr(data-debug-dim) " (" attr(style) ")";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font: 10px/1.2 monospace;
  padding: 2px 4px;
  z-index: 10000;
  pointer-events: none;
}

/* Allow putting the class directly on <app-root> (self, not ancestor) */
app-root.layout-debug {
  outline: 2px solid rgba(255, 105, 180, 0.6);
}

/* Optional: put class on <body> instead */
body.layout-debug app-root {
  outline: 2px solid rgba(255, 105, 180, 0.6);
}

/* Quick ultra-simple fallback (use class debug-all on body or app-root) */
.debug-all * {
  outline: 1px solid rgba(255, 0, 0, 0.25);
}

/* END TEMPORARY LAYOUT DEBUG HELPERS */

/*# sourceMappingURL=styles.css.map*/