:root {
  /* Brand colors (same in light/dark) */
  --color-turquoise: #0068f7;
  --color-cyanblue: #1fb6ff;
  --color-red: #ff4954;
  --color-success: #23dcc8;
  --color-warning0: #f3ba2f;
  --color-boost: #ff33af;
  --color-secured: #b224ec;

  /* Text colors - light theme */
  --color-text0: #303942;
  --color-text1: #101921;
  --color-text2: #616b75;
  --color-text3: #fff;

  /* Background colors - light theme */
  --color-bg0: #fff;
  --color-bg1: #fff;
  --color-bg2: #f3f4f4;
  --color-bg3: #f3f4f4;
  --color-bg-hover: #ededed;

  /* Error colors - light theme */
  --color-error0: #ff4954;
  --color-error1: #fb000f;
  --color-error2: #fffbfc;

  /* Gray colors - light theme */
  --color-gray0: #daddee;
  --color-gray1: #89939d;
  --color-gray2: #616b75;

  /* Shadows - light theme */
  --shadow-full: 0 0 15px #89939d;
}

.dark {
  /* Text colors - dark theme */
  --color-text0: #fff;
  --color-text1: #f3f4f4;
  --color-text2: #d1d5da;
  --color-text3: #fff;

  /* Background colors - dark theme */
  --color-bg0: #111315;
  --color-bg1: #111315;
  --color-bg2: #303942;
  --color-bg3: #000;
  --color-bg-hover: #252c33;

  /* Error colors - dark theme */
  --color-error0: #ff4954;
  --color-error1: #fb000f;
  --color-error2: #fffbfc;

  /* Gray colors - dark theme */
  --color-gray0: #303942;
  --color-gray1: #616b75;
  --color-gray2: #89939d;

  /* Shadows - dark theme */
  --shadow-full: 0 0 15px #616b75;
}