:root {
  /* color */
  --color-primary: 173 96% 39%; /* #04C4AC */
  --color-secondary: 169 72% 76%; /* #95EEDD */
  --color-info: 215 100% 64%; /* #4994ff */
  --color-success: 134 100% 35%; /* #00b42a */
  --color-destructive: 0, 90%, 60%; /* #F53F3F */
  --color-warning: 29, 100%, 50%; /* #FF7D00 */
  --color-disabled: 171, 55%, 90%; /* #D9F4F0 */
  --color-active: 169 72% 76%; /* #95EEDD */

  --color-text-primary: 0 0% 24%; /* #3D3D3D */
  --color-text-secondary: 0 0% 33%; /* #555 */
  --color-text-tertiary: 0 0% 60%; /* #999 */
  --color-text-disabled: 173, 62%, 66%; /* #74DED1 */
  --color-text-readonly: 173, 62%, 66%; /* #74DED1 */
  --color-text-icon: 0 0% 24%; /* #3D3D3D */

  --color-background-primary: 0 0% 95%; /* #f1f1f1 */
  --color-background-secondary: 174, 63%, 97%; /* #F2FCFB */
  --color-background-popover: 0, 0%, 100%, 1; /* #ffffffcc */
  --color-background-overlay: 0, 0%, 20%, 0.102; /* #3333331a */
  --color-background-active: 169 72% 76%; /* #95EEDD */
  --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-disabled: 172, 78%, 20%; /* #0B5A50 */

  --color-background-primary: 150, 7%, 6%; /* #0E100F */
  --color-background-secondary: 170, 45%, 10%; /* #0E2521 */
  --color-background-popover: 150, 7%, 6%; /* #0E100F */
  --color-background-switch: 0, 0%, 60%; /* #999999 */

  --color-text-primary: 0 0% 100%; /* #fff */
  --color-text-secondary: 0 0% 86%; /* #DBDBDB */
  --color-text-disabled: 173, 98%, 25%; /* #017C6D */

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