/* 
 * Theme for GDS
 * We are relying on https://lit.dev/playground/#gist=abcc77f636c1b76506df860db6dc0faf&view-mode=preview for color generation
 *
 * Initial color: 
 * D: #3aaa35
 * I: #f9b233
 * S: #218bc2
 * A: #e61b32
 * B: #fab51e
 * I: #0bacd6
 * L: #dd1783
 * I: #ee6f28
 * T: #6db63b
 * Y: #808080
 * 
 * The color below are generated with 
 * Scheme: Dynamic
 * contrast: 0
 * Primary color: #218bc2
 * Secondary color: #e61b32
 * Tertiary color: #3aaa35
 * Neutral color: #000000
 * 
 * 

 */

:root {
  
  font-variation-settings: 'FILL' 1;
  --md-icon-font-variation-settings: 'FILL' 1;
  

  --_button-icon-size: 24px;
  --md-tonal-button-icon-size: var(--_button-icon-size);
  --md-filled-button-icon-size: var(--_button-icon-size);
  --md-text-button-icon-size: var(--_button-icon-size);
  --md-outlined-button-icon-size: var(--_button-icon-size);
  
  --color-brand: #218bc2;
  --color-brand-rgb: 33, 139, 194;

  --color-brand-0: #3aaa35;
  --color-brand-1: #f9b233;
  --color-brand-2: #218bc2;
  --color-brand-3: #e61b32;
  --color-brand-4: #fab51e;
  --color-brand-5: #0bacd6;
  --color-brand-6: #dd1783;
  --color-brand-7: #ee6f28;
  --color-brand-8: #6db63b;
}

:root {

  --md-sys-color-background: #f9f9fc;
  --md-sys-color-on-background: #191c1e;
  --md-sys-color-surface: #f9f9fc;
  --md-sys-color-surface-dim: #d9dadd;
  --md-sys-color-surface-bright: #f9f9fc;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f3f6;
  --md-sys-color-surface-container: #edeef0;
  --md-sys-color-surface-container-high: #e7e8eb;
  --md-sys-color-surface-container-highest: #e2e2e5;
  --md-sys-color-on-surface: #191c1e;
  --md-sys-color-surface-variant: #dde3ea;
  --md-sys-color-on-surface-variant: #41474d;
  --md-sys-color-inverse-surface: #2e3133;
  --md-sys-color-inverse-on-surface: #f0f0f3;
  --md-sys-color-outline: #71787e;
  --md-sys-color-outline-variant: #c1c7ce;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #006590;
  --md-sys-color-primary: #00557c;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #007cb1;
  --md-sys-color-on-primary-container: #ffffff;
  --md-sys-color-inverse-primary: #89ceff;
  --md-sys-color-secondary: #a4001c;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e51a31;
  --md-sys-color-on-secondary-container: #ffffff;
  --md-sys-color-tertiary: #005e08;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #068814;
  --md-sys-color-on-tertiary-container: #ffffff;
} 

:root[dark] {
  --md-sys-color-background: #111416;
  --md-sys-color-on-background: #e2e2e5;
  --md-sys-color-surface: #111416;
  --md-sys-color-surface-dim: #111416;
  --md-sys-color-surface-bright: #37393c;
  --md-sys-color-surface-container-lowest: #0c0e11;
  --md-sys-color-surface-container-low: #191c1e;
  --md-sys-color-surface-container: #1e2022;
  --md-sys-color-surface-container-high: #282a2c;
  --md-sys-color-surface-container-highest: #333537;
  --md-sys-color-on-surface: #e2e2e5;
  --md-sys-color-surface-variant: #41474d;
  --md-sys-color-on-surface-variant: #c1c7ce;
  --md-sys-color-inverse-surface: #e2e2e5;
  --md-sys-color-inverse-on-surface: #2e3133;
  --md-sys-color-outline: #8b9198;
  --md-sys-color-outline-variant: #41474d;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #89ceff;
  --md-sys-color-primary: #89ceff;
  --md-sys-color-on-primary: #00344d;
  --md-sys-color-primary-container: #007cb1;
  --md-sys-color-on-primary-container: #ffffff;
  --md-sys-color-inverse-primary: #006590;
  --md-sys-color-secondary: #ffb3af;
  --md-sys-color-on-secondary: #68000e;
  --md-sys-color-secondary-container: #c20023;
  --md-sys-color-on-secondary-container: #ffffff;
  --md-sys-color-tertiary: #6fde62;
  --md-sys-color-on-tertiary: #003a03;
  --md-sys-color-tertiary-container: #068814;
  --md-sys-color-on-tertiary-container: #ffffff;


}

:root {
  --md-sys-color-primary-rgb: 18, 38, 179;
  --md-sys-color-secondary-rgb: 1, 186, 163;
  --md-sys-color-tertiary-rgb: 18, 38, 17;

  --md-sys-color-on-primary-rgb: 255, 255, 255;
  --md-sys-color-on-secondary-rgb: 255, 255, 255;
  --md-sys-color-on-tertiary-rgb: 255, 255, 255;
  
  --md-sys-color-background-rgb: 255, 251, 254;
  --md-sys-color-surface-rgb: 255, 251, 254;
 
}

:root {
  
  --md-sys-color-orange: #e6a03a;
  --md-sys-color-green: #459a64;
  --md-sys-color-red: #b43236;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-error-rgb: 186, 26, 26;
  
  --md-sys-color-success: var(--md-sys-color-green);
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #98fa6d;
  --md-sys-color-on-success-container: #042100;
  --md-sys-color-success-rgb: 30, 109, 0;
  
  --md-sys-color-warning: var(--md-sys-color-orange);
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #ffdcb8;
  --md-sys-color-on-warning-container: #2c1600;
  
}

:root[dark] {

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6
  --md-sys-color-error-rgb: 255, 180, 1711;

  --md-sys-color-success: #7ddd53;
  --md-sys-color-success-rgb: 125, 221, 83;
  --md-sys-color-on-success: #0a3900;
  --md-sys-color-success-container: #145200;
  --md-sys-color-on-success-container: #98fa6d;

  --md-sys-color-warning: #ffb865;
  --md-sys-color-on-warning: #492900;
  --md-sys-color-warning-container: #683c00;
  --md-sys-color-on-warning-container: #ffdcb8;
}

:root {

  --color-disabled-text: #646464;
  --color-secondary-text: #555;

}