:root {
  /* Colors */
  /* white and black */
  --white: #ffffff;
  --black: #000000;

  /* blue */
  --blue-100: #c7ecf9;
  --blue-200: #a2dbf0;
  --blue-300: #75ccec;
  --blue-400: #56bde2;
  --blue-500: #29a8d6;
  --blue-600: #1383ac;
  --blue-700: #0a5d7b;
  --blue-800: #053b4e;
  --blue-900: #021923;

  /* orange */
  --orange-100: #f9dbc9;
  --orange-200: #f4c0a2;
  --orange-300: #f3a477;
  --orange-400: #eb854a;
  --orange-500: #e26e2b;
  --orange-600: #b0521b;
  --orange-700: #7b3912;
  --orange-800: #4f270f;
  --orange-900: #20120a;

  /* orange */
  --red-100: #f9c9c9;
  --red-200: #f4a2a2;
  --red-300: #f37777;
  --red-400: #eb4a4a;
  --red-500: #e22b2b;
  --red-600: #b01b1b;
  --red-700: #7b1212;
  --red-800: #4f0f0f;
  --red-900: #200a0a;

  /* green */
  --green-100: #c8f5ca;
  --green-200: #a3eba6;
  --green-300: #75e37a;
  --green-400: #50d956;
  --green-500: #4caf50;
  --green-600: #388e3c;
  --green-700: #2e7d32;
  --green-800: #1b5e20;
  --green-900: #0d3b12;

  /* gray */
  --gray-50: #f5f5f5;
  --gray-100: #ededed;
  --gray-200: #d3d3d3;
  --gray-300: #b9b9b9;
  --gray-400: #989898;
  --gray-500: #808080;
  --gray-600: #6c6c6c;
  --gray-700: #555555;
  --gray-800: #3c3c3c;
  --gray-900: #262626;
  --gray-950: #151515;

  /* background */
  --background: var(--white);
  --background-secondary: var(--gray-100);
  --background-tertiary: var(--gray-200);

  /* foreground */
  --foreground-000: #000000ff;
  --foreground-900: #000000ed;
  --foreground-800: #000000d3;
  --foreground-700: #000000b9;
  --foreground-600: #00000098;
  --foreground-500: #00000080;
  --foreground-400: #0000006c;
  --foreground-300: #00000055;
  --foreground-200: #0000003c;
  --foreground-100: #00000026;
  --foreground-000: #00000014;

  /* border */
  --border-color: var(--foreground-100);
  --border-hover-color: var(--foreground-200);
  --border-secondary-color: var(--foreground-200);
  --border-secondary-hover-color: var(--foreground-300);
  --border-tertiary-color: var(--foreground-300);
  --border-tertiary-hover-color: var(--foreground-400);

  /* main color */
  --primary-color: var(--blue-500);
  --primary-color-text-secondary: #73cded;
  --primary-background-color: #c8f0ff;
  --secondary-color: #e0e0e0;
  --background-color: #ffffff;
  --text-color: #333333;
  --text-white: #ffffff;

  /* other */
  --warning-color: #c8372d;
  --warning-secondary-color: #f4a5a0;
  --warning-color-text: #ffffff;
  --warning-color-orange: #ff9800;

  --gray-color-5: #757575;
  --gray-color-10: #9e9e9e;
  --gray-color-12: #bdbdbd;
  --gray-color-13: #eeeeee;

  /* single bank option */
  --correct-border-color: #4caf50;
  --correct-background-color: #e8f5e9;
  --correct-text-color: #329535;

  --wrong-border-color: #f44336;
  --wrong-background-color: #ffe5e8;
  --wrong-text-color: #d32f2f;

  --text-color: #1f1f1f;
}