:root {
  --black: #000;
  --black-50: #00000080;
  --white: #fff;
  --white-50: #ffffff80;
  /* neutral */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #27272a;
  --neutral-900: #171717;
  /* primary */
  --primary-50: #e6f8f1;
  --primary-100: #B0EAD3;
  --primary-200: #8AE0BE;
  --primary-300: #54D2A0;
  --primary-400: #33C98D;
  --primary-500: #00bc71;
  --primary-600: #00AB67;
  --primary-700: #008550;
  --primary-800: #00673E;
  --primary-900: #004F2F;
  /* warning */
  --warning-50: #fff4e6;
  --warning-100: #FFDEB0;
  --warning-200: #FFCE8A;
  --warning-300: #FFB854;
  --warning-400: #FFAA33;
  --warning-500: #EDAC36;
  --warning-600: #E88800;
  --warning-700: #B56A00;
  --warning-800: #8C5200;
  --warning-900: #6B3F00;
  /* success */
  --success-50: #e6f2ff;
  --success-100: #B0D6FF;
  --success-200: #8AC2FF;
  --success-300: #54A6FF;
  --success-400: #3395FF;
  --success-500: #007aff;
  --success-600: #006fe8;
  --success-700: #0057b5;
  --success-800: #00438C;
  --success-900: #00336B;


  /* secondary */
  --secondary-50: #FFFBEB;
  --secondary-100: #FEF2C2;
  --secondary-200: #FEECA4;
  --secondary-300: #FDE47B;
  --secondary-400: #FDDE61;
  --secondary-500: #FCD63A;
  --secondary-600: #E5C335;
  --secondary-700: #B39829;
  --secondary-800: #8B7620;
  --secondary-900: #6A5A18;
  /* error */
  --error-50: #FFEBEA;
  --error-100: #FFC2BF;
  --error-200: #FFA5A0;
  --error-300: #FF7C74;
  --error-400: #FF6259;
  --error-500: #FF3B30;
  --error-600: #E8362C;
  --error-700: #B52A22;
  --error-800: #8C201A;
  --error-900: #6B1914;
  --logo-fill: #6D6E71;


  /* transition */
  --mid-time: 0.3s;
  /* radius */

  --radius: 8px
}

.dark {
  --black: #fff;
  --black-50: #ffffff80;

  --white-50: #20273280;
  --white: #262626;

  --neutral-50: #131820;
  --white: #262626;
  --neutral-50: #171717;
  --neutral-100: #27272a;
  --neutral-200: #404040;
  --neutral-300: #525252;
  --neutral-400: #737373;
  --neutral-500: #a3a3a3;
  --neutral-600: #d4d4d4;
  --neutral-700: #e5e5e5;
  --neutral-800: #f5f5f5;
  --neutral-900: #e5e5e5;


  --error-50: #6B1914;
  --error-900: #FFEBEA;

  --success-50: #00336B;
  --success-900: #e6f2ff;

  --primary-50: #004F2F;
  --primary-900: #e6f8f1;
  --warning-50: #6B3F00;
  --warning-900: #fff4e6;

  --secondary-50: #6A5A18;
  --secondary-900: #FFFBEB;

  --logo-fill: #E5E5E5;

}