/* Color 🎨 - Brand-Surface */
:root {
    --ELEMENTS-Typografie-headlines: var(--Brand-White-default);
    --ELEMENTS-Typografie-body: var(--Brand-White-default);
    --ELEMENTS-Buttons-button-primary: var(--Brand-Black-default);
    --ELEMENTS-Buttons-button: var(--Brand-White-default);
    --ELEMENTS-Typografie-Dachzeile: var(--Brand-Sekundärfarben-Mattgold-default);
    --ELEMENTS-Surface-light: var(--Brand-White-default);
    --ELEMENTS-Buttons-Primary: var(--Brand-White-default);
    --ELEMENTS-Buttons-Primary-hover: var(--Brand-Black-default);
    --ELEMENTS-Buttons-Secondary: var(--Brand-White-default);
    --ELEMENTS-Buttons-Hover-Sec-&-Ter: var(--Brand-Black-default);
    --ELEMENTS-Buttons-Tertiary: var(--Brand-White-default);
    --ELEMENTS-Surface-dark: var(--Brand-Black-default);
    --ELEMENTS-Surface-mattgold: var(--Brand-Accent-default);
    --ELEMENTS-Border-corner-50: var(--Brand-Grey-5%);
    --ELEMENTS-Border-corner-100: var(--Brand-Grey-10%);
    --ELEMENTS-Icon-default: var(--Brand-White-default);
    --ELEMENTS-Icon-grey: var(--Brand-White-default);
    --ELEMENTS-Card-mattgold: var(--Brand-Sekundärfarben-Mattgold-40%);
    --Brand-White-default: #FFFFFFFF;
    --Brand-Black-default: #2E2B2AFF;
    --Brand-Grey-default: #726C68FF;
    --Brand-Grey-80%: #8C8784FF;
    --Brand-Grey-60%: #A6A3A1FF;
    --Brand-Grey-40%: #C0BEBEFF;
    --Brand-Grey-20%: #DADADBFF;
    --Brand-Grey-10%: #E6E7E8FF;
    --Brand-Grey-7%: #F5F5F4FF;
    --Brand-Grey-5%: #EEEEEFFF;
    --Brand-Grey-3%: #EFF0F2FF;
    --Brand-Accent-default: #1683A2FF;
    --Brand-Accent-80%: #439AB3FF;
    --Brand-Accent-60%: #6FB1C4FF;
    --Brand-Accent-40%: #9BC7D5FF;
    --Brand-Accent-20%: #C7DEE6FF;
    --Brand-Sekundärfarben-Mattgold-dark: #7F6742FF;
    --Brand-Sekundärfarben-Mattgold-default: #B0956EFF;
    --Brand-Sekundärfarben-Mattgold-80%: #BEA889FF;
    --Brand-Sekundärfarben-Mattgold-60%: #CCBBA5FF;
    --Brand-Sekundärfarben-Mattgold-40%: #D8CFC0FF;
    --Brand-Sekundarfarben-Mattgold-20: #E6E2DCFF;
    --Brand-Sekundärfarben-Amber-default: #FABD43FF;
    --Brand-Sekundärfarben-Amber-80%: #F9C867FF;
    --Brand-Sekundärfarben-Amber-60%: #F8D38BFF;
    --Brand-Sekundärfarben-Amber-40%: #F6DFAFFF;
    --Brand-Sekundärfarben-Amber-20%: #F5EAD3FF;
    --Brand-Sekundärfarben-Creme-dark: #AA8C7DFF;
    --Brand-Sekundärfarben-Creme-default: #BFA89DFF;
    --Brand-Sekundärfarben-Creme-80%: #CAB7AFFF;
    --Brand-Sekundärfarben-Creme-60%: #D5C7C1FF;
    --Brand-Sekundärfarben-Creme-40%: #DED6D3FF;
    --Brand-Sekundärfarben-Creme-20%: #E9E6E5FF;
    --Brand-Auszeichnungsfarben-Vermilion-default: #E6553DFF;
    --Brand-Auszeichnungsfarben-Vermilion-80%: #EB7764FF;
    --Brand-Auszeichnungsfarben-Vermilion-60%: #F0998BFF;
    --Brand-Auszeichnungsfarben-Vermilion-40%: #F5BBB1FF;
    --Brand-Auszeichnungsfarben-Vermilion-20%: #FADDD8FF;
    --Brand-Auszeichnungsfarben-Viola-default: #AA6DB3FF;
    --Brand-Auszeichnungsfarben-Viola-80%: #BB8AC2FF;
    --Brand-Auszeichnungsfarben-Viola-60%: #CCA7D1FF;
    --Brand-Auszeichnungsfarben-Viola-40%: #DDC5E1FF;
    --Brand-Auszeichnungsfarben-Viola-20%: #EEE2F0FF;
    --Brand-Auszeichnungsfarben-Moss-default: #72A561FF;
    --Brand-Auszeichnungsfarben-Moss-80%: #8EB781FF;
    --Brand-Auszeichnungsfarben-Moss-60%: #AAC9A0FF;
    --Brand-Auszeichnungsfarben-Moss-40%: #C7DBC0FF;
    --Brand-Auszeichnungsfarben-Moss-20%: #E3EDDFFF;
    --Brand-Auszeichnungsfarben-***Crimson-default: #C21700FF;
    --Brand-Auszeichnungsfarben-***Crimson-80%: #CC4331FF;
    --Brand-Auszeichnungsfarben-***Crimson-60%: #D67063FF;
    --Brand-Auszeichnungsfarben-***Crimson-40%: #E09C94FF;
    --Brand-Auszeichnungsfarben-***Crimson-20%: #EAC9C6FF;
    --Brand-Auszeichnungsfarben-***Rubin-default: #9C1E36FF;
    --Brand-Auszeichnungsfarben-***Rubin-80%: #AE495CFF;
    --Brand-Auszeichnungsfarben-***Rubin-60%: #C07483FF;
    --Brand-Auszeichnungsfarben-***Rubin-40%: #D09FAAFF;
    --Brand-Auszeichnungsfarben-***Rubin-20%: #E2CAD1FF;
    --Brand-Auszeichnungsfarben-***Purple-default: #703D5DFF;
    --Brand-Auszeichnungsfarben-***Purple-80%: #8B627BFF;
    --Brand-Auszeichnungsfarben-***Purple-60%: #A5879BFF;
    --Brand-Auszeichnungsfarben-***Purple-40%: #BFABB9FF;
    --Brand-Auszeichnungsfarben-***Purple-20%: #D9D0D9FF;
    --Brand-Auszeichnungsfarben-***Emerald-default: #009573FF;
    --Brand-Auszeichnungsfarben-***Emerald-80%: #31A88DFF;
    --Brand-Auszeichnungsfarben-***Emerald-60%: #62BBA8FF;
    --Brand-Auszeichnungsfarben-***Emerald-40%: #92CFC2FF;
    --Brand-Auszeichnungsfarben-***Emerald-20%: #C3E2DDFF;
    --Brand-Auszeichnungsfarben-***Blue-default: #5B80A3FF;
    --Brand-Auszeichnungsfarben-***Blue-80%: #7A97B3FF;
    --Brand-Auszeichnungsfarben-***Blue-60%: #99AFC5FF;
    --Brand-Auszeichnungsfarben-***Blue-40%: #B6C6D5FF;
    --Brand-Auszeichnungsfarben-***Blue-20%: #D5DEE7FF;
    --Brand-Auszeichnungsfarben-***Slate-default: #28434FFF;
    --Brand-Auszeichnungsfarben-***Slate-80%: #516770FF;
    --Brand-Auszeichnungsfarben-***Slate-60%: #7A8A92FF;
    --Brand-Auszeichnungsfarben-***Slate-40%: #A2AEB4FF;
    --Brand-Auszeichnungsfarben-***Slate-20%: #CBD1D6FF;
    --Brand-Work-Kienbaum-work-50: #626AFDFF;
    --Brand-Work-Kienbaum-work-100: #4F55CCFF;
    --Brand-Work-Kienbaum-work-200: #313580FF;
    --Attentions-correct: var(--Brand-Auszeichnungsfarben-***Emerald-default);
    --Attentions-fail: var(--Brand-Sekundärfarben-Amber-default);
    --Attentions-alert: var(--Brand-Auszeichnungsfarben-***Crimson-80%);
    --ELEMENTS-Icon-gold: var(--Brand-White-default);
  }


/* DEV - color */
:root {
  --kb-white: var(--Brand-White-default);
  --kb-black: var(--Brand-Black-default);
  --kb-accent: var(--Brand-Accent-default);
  --kb-background: var(--Brand-Sekundarfarben-Mattgold-20);
  --kb-mattgold-light: var(--Brand-Sekundärfarben-Mattgold-default);
  --kb-mattgold-dark: var(--Brand-Sekundärfarben-Mattgold-dark);
}