:root {
  /*Text Colors*/
  --text-primary: #03182b;
  --text-secondary: #4f5d6b;
  --text-tertiary: #818c95;
  --text-interaction: #0067b1;
  --text-error: #ef3e42;
  --text-success: #2b8809;
  --text-reversed: #ffffff;
  --text-currency-header: #313336;

  /*Background Colors*/
  --bg-primary-default: #0067b1;
  --bg-secondary: #eff9fd;
  --bg-active: #0067b1;
  --bg-success: #6cc24a;
  --bg-accent-light: #def1ff;
  --bg-tertiary: #ffffff;
  --bg-alert-alt: #1c2f40;
  --bg-disabled: #eef0f2;
  --bg-success-light: #e2f3db;
  --bg-reverse: #ffffff;
  --bg-accent: #0067b1;
  --bg-primary-disable: #eef0f2;
  --bg-date-header: #a9c4e699;

  /*Border Colors*/
  --border-default: #e0e4e9;
  --border-active: #0067b1;
  --stroke-divider: #eef0f2;

  /* Chart data colors */
  --chart-data-1: #0067b1;
  --chart-data-2: #5bc2e7;
  --chart-data-3: #ef3e42;
  --chart-data-4: #2b8809;
  --chart-data-5: #615e9b;
  --chart-data-6: #ed6c1c;
}

/* Red Theme Variables */
[data-theme="red"] {
  /*Text Colors*/
  --text-primary: #2c1b1b;
  --text-secondary: #5d3d3d;
  --text-tertiary: #8c5c5c;
  --text-interaction: #b10000;
  --text-error: #ef3e42;
  --text-success: #2b8809;
  --text-reversed: #ffffff;
  --text-currency-header: #3d2b2b;

  /*Background Colors*/
  --bg-primary-default: #b10000;
  --bg-secondary: #fde6e6;
  --bg-active: #b10000;
  --bg-success: #6cc24a;
  --bg-accent-light: #ffd1d1;
  --bg-tertiary: #ffffff;
  --bg-alert-alt: #401c1c;
  --bg-disabled: #f2eeee;
  --bg-success-light: #e2f3db;
  --bg-reverse: #ffffff;
  --bg-accent: #b10000;
  --bg-primary-disable: #f2eeee;
  --bg-date-header: #e0b5b599;

  /*Border Colors*/
  --border-default: #e9d0d0;
  --border-active: #b10000;
  --stroke-divider: #f2eeee;

  /* Chart data colors */
  --chart-data-1: #b10067;
  --chart-data-2: #f95cb5;
  --chart-data-3: #ef3e42;
  --chart-data-4: #2b8809;
  --chart-data-5: #615e9b;
  --chart-data-6: #ed6c1c;
}

/* Green Theme Variables */
[data-theme="green"] {
  /*Text Colors*/
  --text-primary: #1b2c1b;
  --text-secondary: #3d5d3d;
  --text-tertiary: #5c8c5c;
  --text-interaction: #007b1b;
  --text-error: #ef3e42;
  --text-success: #2b8809;
  --text-reversed: #ffffff;
  --text-currency-header: #2b3d2b;

  /*Background Colors*/
  --bg-primary-default: #007b1b;
  --bg-secondary: #e6fdef;
  --bg-active: #007b1b;
  --bg-success: #6cc24a;
  --bg-accent-light: #d1ffd8;
  --bg-tertiary: #ffffff;
  --bg-alert-alt: #1c4021;
  --bg-disabled: #eef2ef;
  --bg-success-light: #e2f3db;
  --bg-reverse: #ffffff;
  --bg-accent: #007b1b;
  --bg-primary-disable: #eef2ef;
  --bg-date-header: #b5d8b099;

  /*Border Colors*/
  --border-default: #d0e9d4;
  --border-active: #007b1b;
  --stroke-divider: #eef2ef;

  /* Chart data colors */
  --chart-data-1: #007b1b;
  --chart-data-2: #5cf97c;
  --chart-data-3: #ef3e42;
  --chart-data-4: #2b8809;
  --chart-data-5: #615e9b;
  --chart-data-6: #ed6c1c;
}

/* Yellow Theme Variables */
[data-theme="yellow"] {
  /*Text Colors*/
  --text-primary: #2c2c1b;
  --text-secondary: #5d5d3d;
  --text-tertiary: #8c8c5c;
  --text-interaction: #b18f00;
  --text-error: #ef3e42;
  --text-success: #2b8809;
  --text-reversed: #ffffff;
  --text-currency-header: #3d3d2b;

  /*Background Colors*/
  --bg-primary-default: #b18f00;
  --bg-secondary: #fff9e6;
  --bg-active: #b18f00;
  --bg-success: #6cc24a;
  --bg-accent-light: #fff3cc;
  --bg-tertiary: #ffffff;
  --bg-alert-alt: #403c1c;
  --bg-disabled: #f2f1ee;
  --bg-success-light: #f3f1db;
  --bg-reverse: #ffffff;
  --bg-accent: #b18f00;
  --bg-primary-disable: #f2f1ee;
  --bg-date-header: #f5e6a999;

  /*Border Colors*/
  --border-default: #e9e4d0;
  --border-active: #b18f00;
  --stroke-divider: #f2f1ee;

  /* Chart data colors */
  --chart-data-1: #b18f00;
  --chart-data-2: #f9e95c;
  --chart-data-3: #ef3e42;
  --chart-data-4: #2b8809;
  --chart-data-5: #615e9b;
  --chart-data-6: #ed6c1c;
}

[data-theme="grey"] {
  /* Text Colors */
  --text-primary: #2c2c2c;
  --text-secondary: #5d5d5d;
  --text-tertiary: #8c8c8c;
  --text-interaction: #4f5d6b;
  --text-error: #ef3e42;
  --text-success: #2b8809;
  --text-reversed: #ffffff;
  --text-currency-header: #3d3d3d;

  /* Background Colors */
  --bg-primary-default: #4f5d6b;
  --bg-secondary: #f4f5f6;
  --bg-active: #4f5d6b;
  --bg-success: #6cc24a;
  --bg-accent-light: #e2e6ea;
  --bg-tertiary: #ffffff;
  --bg-alert-alt: #2f3338;
  --bg-disabled: #eaeaea;
  --bg-success-light: #e2f3db;
  --bg-reverse: #ffffff;
  --bg-accent: #4f5d6b;
  --bg-primary-disable: #eaeaea;
  --bg-date-header: #b5bdc899;

  /* Border Colors */
  --border-default: #dcdcdc;
  --border-active: #4f5d6b;
  --stroke-divider: #eaeaea;

  /* Chart data colors */
  --chart-data-1: #4f5d6b;
  --chart-data-2: #a0a8b3;
  --chart-data-3: #ef3e42;
  --chart-data-4: #2b8809;
  --chart-data-5: #615e9b;
  --chart-data-6: #ed6c1c;
}

/*Start of Typography*/
.p1-regular {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.p3-regular {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.p4-regular,
.body-2-regular {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.h1-bold {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.h2-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.p1-bold {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.p2-regular {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.p2-bold,
.interaction-large {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.p3-bold,
.interaction-medium,
.body-1-bold {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.p4-bold {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

@media (min-width: 574px) {
  .without-scrollbar {
    padding-right: var(--scrollbar-width);
  }

  .page-container {
    max-width: 574px;
    margin: 0 auto;
  }
}