:root {
  /* color */
  --color-primary: 258 90% 66%; /* #8B5CF6 */
  --color-secondary: 237 100% 96%; /* #E8F3FF */
  --color-info: 215 100% 64%; /* #4994ff */
  --color-success: 134 100% 35%; /* #00b42a */
  --color-destructive: 0 90% 60%; /* #f53f3f */
  --color-warning: 47 100% 60%; /* #FFD332 */
  --color-disabled: 252 88% 97%; /* #F2EFFE */

  --color-text-primary: 0 0% 24%; /* #3D3D3D */
  --color-text-secondary: 0 0% 33%; /* #555 */
  --color-text-tertiary: 0 0% 60%; /* #999 */
  --color-text-disabled: 253 89% 85%; /* #C6B7FB */
  --color-text-readonly: 253 89% 85%;; /* #C6B7FB */
  --color-text-icon: 0 0% 24%; /* #3D3D3D */

  --color-background-primary: 0 0% 95%; /* #f1f1f1 */
  --color-background-secondary: 237 100% 96%; /* #E8F3FF */
  --color-background-popover: 0, 0%, 100%, 0.8; /* #ffffffcc */
  --color-background-overlay: 0, 0%, 20%, 0.102; /* #3333331a */
  --color-background-active: 215 100% 43%; /* #0059d9 */
  --color-background-switch: 0 0% 60%; /* #999 */

  --color-border: 0 0% 88%; /* #E1E1E1 */
  --color-border-thin: 0 0% 100%; /* #999 */
  --color-border-table: 0 0% 88%; /* #e1e1e1 */
  --color-border-pagination: 0 0% 93%; /* #eee */
}


.dark:root{
  --color-background-primary: 215 85% 5%; /* #020B18 */
  --color-background-secondary: 243 44% 24%; /* #252257 */
  --color-background-popover: 215, 85%, 5%, 0.5; /* #ffffff1a */
  --color-background-switch: 243 44% 24%; /* #252257 */

  --color-text-primary: 0 0% 100%; /* #fff */
  --color-text-secondary: 0 0% 86%; /* #DBDBDB */

  --color-border-table: 0 0% 100%; /* #fff */
}