:root {
  /* color */
  --color-primary: 244, 100%, 75%; /* #857DFF */
  --color-secondary: 245, 34%, 20%; /* #242143 */
  --color-info: 215, 100%, 64%; /* #4994ff */
  --color-success: 134, 100%, 35%; /* #00b42a */
  --color-destructive: 0, 90%, 60%; /* #f53f3f */
  --color-warning: 48, 100%, 51%; /* #FFCC05 */
  --color-disabled: 0, 0%, 64%; /* #a4a4a4 */

  --color-text-primary: 0, 0%, 100%; /* #fff */
  --color-text-secondary: 0, 0%, 86%; /* #DBDBDB */
  --color-text-tertiary: 0, 0%, 67%; /* #ACACAC */
  --color-text-disabled: 0, 0%, 90%; /* #B0B0B0 */
  --color-text-readonly: 122, 39%, 25%; /* #265728 */
  --color-text-icon: 0, 0%, 20%; /* #333 */

  --color-background-primary: 0, 0%, 2%; /* #060606 */
  --color-background-secondary: 245, 34%, 20%; /* #242143 */
  --color-background-popover: 0, 0%, 2%; /* #060606 */
  --color-background-overlay: 0, 0%, 20%; /* #3333331a */
  --color-background-active: 215, 100%, 43%; /* #0059d9 */
  --color-background-switch: 0, 0%, 60%; /* #999 */

  --color-border: 231, 4%, 32%; /* #4f5056 */
  --color-border-thin: 231, 4%, 32%; /* #4f5056 */
  --color-border-pagination: 0, 0%, 93%; /* #eee */
}

.dark:root{

  --color-background-primary: 0, 0%, 2%; /* #060606 */
  --color-background-secondary: 245, 34%, 20%; /* #242143 */
  --color-background-popover: 0, 0%, 2%; /* #060606 */

  --color-text-primary: 0, 0%, 100%; /* #fff */
  --color-text-secondary: 0, 0%, 67%; /* #ACACAC */
  --color-text-tertiary: 0, 0%, 67%; /* #ACACAC */
  --color-text-disabled: 0, 0%, 69%; /* #B0B0B0 */
  
  --color-border: 260, 7%, 26%; /* #4f5056 */
  --color-border-thin: 260, 7%, 26%; /* #4f5056 */
}