:root { --gray50: #ffffff; --gray75: #fafafa; --gray100: #f5f5f5; --gray200: #eaeaea; --gray300: #e1e1e1; --gray400: #cacaca; --gray500: #b3b3b3; --gray600: #8e8e8e; --gray700: #6e6e6e; --gray800: #4b4b4b; --gray900: #2c2c2c; --primary400: #2680eb; --primary500: #1473e6; --primary600: #0d66d0; --primary700: #095aba; --font-size-xlarge: 36px; --font-size-large: 24px; --font-size-normal: 16px; --font-size-small: 14px; --font-size-xsmall: 12px; --grid-size-small: 576px; --grid-size-medium: 768px; --grid-size-large: 992px; --grid-size-xlarge: 1140px; --red400: #e34850; --red500: #d7373f; --red600: #c9252d; --red700: #bb121a; --green400: #2d9d78; --green500: #268e6c; --green600: #12805c; --green700: #107154; --msgColor: #ffffff; } [data-theme='dark'] { /* --gray50: #080808; --gray75: #1a1a1a; --gray100: #1e1e1e; --gray200: #2c2c2c; --gray300: #393939; --gray400: #494949; --gray500: #5c5c5c; --gray600: #7c7c7c; --gray700: #6e6e6e; --gray800: #a2a2a2; --gray900: #efefef; */ --gray50: #252525; --gray75: #2f2f2f; --gray100: #323232; --gray200: #3e3e3e; --gray300: #4a4a4a; --gray400: #5a5a5a; --gray500: #6e6e6e; --gray600: #909090; --gray700: #b9b9b9; --gray800: #e3e3e3; --gray900: #ffffff; }